[分享]css六边形知名填充图片

CSS六边形图案已经成为网页设计中非常流行的一种图案。在这个设计中，我们会使用一个空的六边形和三角形来创建一个填充图案。当然，我们可以使用图像来填充这个六边形，但使用CSS填充则更方便、更灵活。 .h...

CSS六边形图案已经成为网页设计中非常流行的一种图案。在这个设计中，我们会使用一个空的六边形和三角形来创建一个填充图案。当然，我们可以使用图像来填充这个六边形，但使用CSS填充则更方便、更灵活。

 .hexagon{
    position: relative;
    width: 200px;
    height: 125px;
    background-color: transparent;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
  
  .hexagon:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url("fill_pattern.jpg") repeat;
    width: 200px;
    height: 125px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  } 

代码中使用clip-path属性来裁剪六边形的形状以及填充三角形的形状。我们使用:before伪类来创建一个与六边形相同形状的元素，然后在其中添加一个填充图案。我们可以在此处更改填充图案的URL，以获得不同的视觉效果。

使用CSS填充六边形更为灵活，因为您可以针对不同的状态或交互使用不同的填充图案，而无需为每个图案创建一个新的图像文件。此外，使用CSS创建六边形图案比使用图像文件更加灵活，并且可以更快地加载，因为浏览器不需要下载大量的图像文件。