[分享]css六边形怎么覆盖图片

CSS六边形是一个很有趣的形状，可以用来装饰页面，这里我们讲一下怎么用CSS覆盖图片变成六边形。

 .hexagon {
        position: relative;
        width: 100px; 
        height: 57.74px;
        margin: 28.87px 0;
        background-image: url('图片路径');
        background-size: cover;
        display: inline-block;
        transform: rotate(-30deg) skewY(30deg);
        overflow: hidden;
      }

      .hexagon:before,
      .hexagon:after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-image: inherit; 
        background-size: inherit;
        display: block;
      }

      .hexagon:before {
        top: -50%;
        transform: skewY(-30deg) rotate(60deg) translateX(-100%);
      }

      .hexagon:after {
        bottom: -50%;
        transform: skewY(-30deg) rotate(-60deg) translateX(-100%);
      } 

要实现这个六边形效果，我们首先需要给六边形一个背景图片，这里我们给出了一个background-image的样例，并设置background-size为cover，这样就可以填满整个六边形的范围，并不会拉伸变形。

接下来，我们需要用:before和:after伪元素，来对已有的六边形效果进行修饰。

由于六边形的特殊性质，我们需要让伪元素的位置进行一定的旋转和倾斜，来达到六边形的特殊形状。同时，由于要覆盖图片，我们需要设置伪元素的大小和背景图片与本体相同。

最后，我们在:before和:after内部加入background-image: inherit，来继承本体的背景图片，这样就可以实现图片的覆盖效果。

应该注意的是，由于六边形的特殊性质，规定了六边形长宽的比例为sqrt(3):2，因此我们需要注意在样式中设置高度的值跟宽度的值必须按这一规定进行比例的设定。

以上是关于CSS六边形怎么覆盖图片的介绍。