带信息的六边形？

Question

我正在为我的网站制作“我的个人资料”按钮，这就是我想要的：

（取自游戏）。我将如何在 CSS 和 HTML 中获得这些能量、健康和经验？

我目前的进度：http://play.futuretechs.eu/index.php/myprofile

我不需要文字，只需要那些外线。

Answer 1

*, *:before, *:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.css-shapes-preview {
    position: relative;
    height: 0px;
    width: 200px;
    border-left: 0px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 100px solid #428BCA;
}

<div class="css-shapes-preview"></div>

带信息的六边形？

Hexagon with information?

html

css

css-shapes