css实现画六边形

CSS实现画六边形

前置知识：
1. Box-sizing属性
2. transform旋转和变形
3. :before/:after伪元素

代码：
.hexagon {
    width: 100px;
    height: 55px;
    position: relative;
    margin: 28px auto;
    background-color: #6C6;
    Box-sizing: border-Box; /*让盒子大小不被边框撑大*/
}

/*绘制六边形*/
.hexagon:before,.hexagon:after {
    content: "";
    position: absolute;
    top: -25px;
    border-bottom: 25px solid #6C6;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    Box-sizing: border-Box; /*让盒子大小不被边框撑大*/
}

.hexagon:before {
    transform: rotate(60deg);
}

.hexagon:after {
    transform: rotate(-60deg);
}

解析：
六边形的本体是一个正六边形，它的CSS属性可以设置为香蕉形，即Box-sizing: border-Box，然后再设置一个向上平移，使其呈现出三角形的效果，最后逆时针和顺时针旋转60度，就可以得到一个完整的六边形了。