Html 如何使用css进行不规则的exagon？

我想用css做这个形状

有什么建议吗？

您可以使用CSS

div{
高度：100px；
宽度：100px；
剪辑路径：多边形（25%0%、75%0%、100%50%、75%100%、25%100%、0%50%）；
背景：#ccc；
}

---

不过要小心。具有相等边长和宽度

w

（如对角线）的正六边形具有高度

sqrt（3）/2*w

。在本例中，高度应定义为

86.6px

。