我可以仅使用 html 和 css 复制此图像 - 特别是形状和边缘吗？ [复制]

Question

如果可能的话，我想只使用 html 和 css 来复制下面的图像。我想将其用作更改图标和颜色的“徽章”。静态图片不适合我：

一切似乎都可行，但我不知道如何复制徽章本身的实际形状（绿色部分）。我需要研究一个特定的 css 指令来实现这一点吗？

编辑：似乎提出了“重复问题”问题。请注意，链接到的问题不包括六边形中心的图像或文本，这个是。这给问题增加了一点复杂性，因此也增加了新问题。根据这个问题的答案，我能够制定一个更好的谷歌搜索，并遇到了一个对我来说非常有用的代码笔。我投票支持重新提出问题。

Answer 1

可以。但是如果你使用 SVG 会更好。这是一个圆角的例子

body{margin:0;}
.hexagon {
    width: 120px;
    height: 60px;
    position: relative;
    margin:50px 10px;
}
.hexagon, .hexagon:before, .hexagon:after {
    background: green;
    border-radius: 5px  
}
.hexagon:before, .hexagon:after {
    content: "";
    position: absolute;
    left: 23px;
    width: 74px;
    height: 70px;
    -moz-transform: rotate(145deg) skew(22.5deg);
    -webkit-transform: rotate(145deg) skew(22.5deg);
    transform: rotate(145deg) skew(22.5deg);
}
.hexagon:before {
    top: -35px;
}
.hexagon:after {
    top: 35px;
}
.hexagon span {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 70px;
    background:green;
    z-index: 1;
}

 <div class="hexagon"><span></span></div>

Answer 2

CSS Tricks 有一个很棒的关于形状的页面，more here，这就是我如何完成你想要的，而不是我在形状 div 中的文本，替换为你选择的图标字体及其 html 和 css （忽略我添加到六边形的边距顶部，它只是在那里，所以你可以看到整个东西：

#hexagon { width: 100px; height: 55px; background: red; position: relative; margin-top: 3em; line-height: 55px; text-align: center; color: white;} 

#hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; } 

#hexagon:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red; }

<div id="hexagon">X THING</div>