[分享]css做六边形

CSS做六边形是一种常用的技巧，可以用于美化网页，下面我们来学习一下如何实现。

.hexagon {
    width: 100px;
    height: 55px;
    position: relative;
    margin: 27.5px 0;
    background-color: #6C6;
}

.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

.hexagon:before {
    bottom: 100%;
    border-bottom: 27.5px solid #6C6;
}

.hexagon:after {
    top: 100%;
    width: 0;
    border-top: 27.5px solid #6C6;
}

这段代码就实现了一个六边形的样式，其中用到了两个伪元素:before和:after，在前面定义了一个正方形，然后通过伪元素的方式把上下部分变成三角形，就形成了一个六边形。

需要注意的是，这里的宽度和高度需要根据需求进行调整，同时也可以修改背景色和边框样式，以达到更好的美化效果。