css嵌入六边形图片

现在很多网站都喜欢使用六边形图片来装饰，那么如何使用CSS将六边形图片嵌入到网页中呢？

.hexagon {
      position: relative;
      width: 200px;
      height: 115.47px;
      background-color: #64C7CC;
      margin: 57.74px 0;
}
.hexagon:before,.hexagon:after {
      content: "";
      position: absolute;
      z-index: 1;
      width: 141.42px;
      height: 141.42px;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      background-color: inherit;
      left: 29.29px;
}
.hexagon:before {
      top: -70.71px;
      border-top: solid 7.07px #50A4AF;
      border-right: solid 7.07px #50A4AF;
}
.hexagon:after {
      bottom: -70.71px;
      border-bottom: solid 7.07px #50A4AF;
      border-left: solid 7.07px #50A4AF;
}
    

如上代码所示，我们创建了一个类名为hexagon的CSS样式，在这个样式里设置了这个元素的宽高、背景颜色以及相对位置。接下来，我们使用了伪元素:before和:after来生成两个六边形。

这两个六边形通过CSS的transform属性进行旋转45度，并且设置了相对位置。通过设置样式的border属性，我们分别对六边形的上边框、右边框、下边框、左边框进行了样式设置。这里要注意的是，六边形的边框宽度为7.07px，这是因为在等边六边形中，一条边的长度为宽度的√3倍。

最后，在HTML中使用这个类名即可将六边形样式应用到相应的元素上。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！