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

Question

如果可能的话，我想只使用 html 和 css 来复制下面的图像。我想将其用作 "badge" 并更改图标和颜色。静态图像对我不起作用：

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

编辑：似乎有人提出了 "Duplicate Question" 关注。请注意问题的链接不包含六边形中心的图像或文本，这个包含。这增加了问题的复杂性，从而增加了新问题。基于这个问题的答案，我能够制定更好的 google 搜索并遇到一个对我来说效果很好的代码笔。我投票赞成重新提出问题。

Answer 1

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>

Answer 2

有可能。但是如果你使用 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>

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

Can I replicate this image using only html and css - specifically the shape and edges?

html

css

badge