【问题标题】：Hexagonal Images [duplicate]六边形图像 [重复]
【发布时间】：2015-09-23 17:05:07
【问题描述】：

圆形图片

我可以使用border-radius获得圆形边框：

img {
  border-radius: 50%;
}

六边形图片

我希望创建 六边形 图像。我猜需要将图像包装在 div/span（或其中的几个）中。

类似于以下任何一种：

为简单起见，所有图片均为方形。

目标

获得这样的图像的目的是将它们堆叠成蜂窝状结构。我不会把它作为问题的一部分，因为如果我可以得到六边形的图像，它应该相对容易实现。

【问题讨论】：

公平地说，这个问题已被标记为重复，但答案要好得多。
那么@matthewelsom 应该考虑将其添加为它的答案。
@j08691 同意，我的意思不是重新打开。

标签： html css css-shapes

【解决方案1】：

clip-path...

img {
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

&lt;img src="http://placehold.it/200"&gt;

这是一个jazzy tool，用于轻松生成剪辑路径属性。这里是nice article，提供更多信息。

【讨论】：

这是一个很棒的解决方案。谢谢！
@matthewelsom 您可能希望在顶部链接的重复答案上方添加您的答案。
@jcuenod 请注意，此解决方案仅适用于 webkit 浏览器。 IE 不支持 clip-path 属性，FF 不支持多边形。更多信息canIuse
但是您可以使用内联 svg：stackoverflow.com/questions/28311741/…
@jcuenod 我在这里的重复问题中提供了一种 SVG 方法：stackoverflow.com/a/31284251/1811992