css实现蜂巢六边形（css 蜂窝）

CSS可以实现很多有趣的效果，例如蜂巢六边形。下面就来介绍一下如何使用CSS实现这个效果。

.hexagon {
    display: inline-block;
    width: 100px;
    height: 55px;
    position: relative;
    background-color: #F2C94C;
    margin-right: 10px;
}
.hexagon:before,.hexagon:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 55px;
    background-color: #F2C94C;
    z-index: -1;
    transform: rotate(60deg);
}
.hexagon:before {
    transform: rotate(-60deg);
}
    

代码解读：

首先我们使用一个div元素，设置它的宽为100px，高为55px，背景色为#F2C94C，然后再给它添加一个伪元素before。这个伪元素的宽高和div元素相同，背景色也是#F2C94C，同时，我们把它旋转了60度。接下来我们再添加一个伪元素after，它的宽高和背景色和before一样，也被旋转了60度，不同的是，它的角度是-60度。在把两个伪元素放置到div元素中的位置和它们旋转的角度相对应之后，我们就成功地实现了一个六边形的形状。

最后贴出效果图：

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