六边形图像

Question

圆形图片

我可以使用 border-radius:

获得圆形边框

img {
  border-radius: 50%;
}

六边形图像

不过我希望创建 六角形 图像。我猜需要将图像包装在 div/span（或其中的一些）中。

类似于以下任一内容：

为了简单起见，所有图像都是方形的。

Objective

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

Answer 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%);
}

<img src="http://placehold.it/200">

这里有一个jazzy tool方便生成clip-path属性。这是包含更多信息的 nice article。

六边形图像

Hexagonal Images

html

css

css-shapes

圆形图片

六边形图像

Objective