css三角形通过旋转实现六边形

CSS三角形可以通过旋转来实现六边形，这么做的好处是可以减少使用图片的数量，从而提高页面的加载速度，还可以使用CSS动画来实现相应的效果。

.hexagon {
    position: relative;
    width: 100px;
    height: 55px;
}
.hexagon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-right: 50px solid transparent;
    border-top: 27.5px solid #333;
    border-left: 50px solid transparent;
    transform-origin: 50% 50%;
    transform: rotateZ(60deg);
}
.hexagon:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border-right: 50px solid transparent;
    border-bottom: 27.5px solid #333;
    border-left: 50px solid transparent;
    transform-origin: 50% 50%;
    transform: rotateZ(-60deg);
} 

在上面的代码中，我们定义了一个容器，它的宽度是100px，高度是55px，然后使用:before和:after伪类来分别表示六边形的上半部分和下半部分的三角形，相应的的CSS样式设置如下：

• border-right：设置三角形右边的边框为0
• border-top：设置三角形上边的边框为指定颜色的边框，例如#333
• border-left：设置三角形左边的边框为0
• transform-origin：设置旋转的中心点，这里设置为三角形的中心点，即50% 50%
• transform：设置旋转的角度，这里设置为60度和-60度，这样就可以组成一个完整的六边形

通过上面的代码，就可以轻松地实现六边形效果。