六角形图像 [英] Hexagonal Images

问题描述

Circle Images

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

  img {
 border-radius：50％; 
 
  

六角形图像

虽然我希望创建六角形图片。我猜想将图片包装在 div / span （或其中一些）中是必需的。

类似以下任何一种：

For简单的缘故，所有图像都是正方形。

目标

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

解决方案

p>如何剪辑路径 ...

img {-webkit-clip - 路径：多边形（50％0％，100％25％，100％75％，50％100％，0％75％，0％25％）;剪辑路径：多边形（50％0％，100％ ％，100％75％，50％100％，0％75％，0％25％）;}

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

这里有一个爵士乐工具生成剪辑路径属性。
以下是好文章，提供更多信息。

Circle Images

I can get circle borders using border-radius:

img {
  border-radius: 50%;
}

Hexagonal Images

I'm hoping to create hexagonal images though. I'm guessing that wrapping the images in a div/span (or a few of them) will be required.

Something like either of these:

For simplicity's sake, all images are square.

Objective

The point of getting images like this is to stack them in a honeycomb like structure. I'm not putting this as part of the question as it should be relatively easy to achieve if I can get my images hexagonal.

解决方案

How about 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">

Here is a jazzy tool for easily generating the clip-path attribute. And here is a nice article with more information.

这篇关于六角形图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！