<分区>
html - 我可以仅使用 html 和 css 复制此图像吗？特别是形状和边缘吗？
如果可能，我想只使用 html 和 css 复制下面的图像。我想将其用作具有不断变化的图标和颜色的“徽章”。静态图像对我不起作用:
一切似乎都可行，但我不知道如何复制徽章本身的实际形状(绿色部分)。我是否需要研究特定的 css 指令才能实现此目的？
编辑:似乎提出了“重复问题”问题。请注意问题的链接不包含六边形中心的图像或文本，这个包含。这增加了问题的复杂性，从而增加了新问题。基于这个问题的答案，我能够制定更好的谷歌搜索并遇到一个对我来说效果很好的代码笔。我投票赞成重新提出问题。
最佳答案
有可能。但是如果你使用 SVG 会更好。这是一个圆 Angular 的例子
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 - 我可以仅使用 html 和 css 复制此图像吗？特别是形状和边缘吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40833917/