css 画六角形

CSS是一种层叠样式表语言，它可以将网页的样式与内容分离，方便网页设计。其中，CSS画六角形是一种比较常见的需求，下面我们来看看具体实现方法。

.hexagon {
    width: 100px;
    height: 55px;
    background-color: #f00;
    position: relative;
}
.hexagon:before, .hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
.hexagon:before {
    top: -27.5px;
    border-bottom: 27.5px solid #f00;
}
.hexagon:after {
    bottom: -27.5px;
    border-top: 27.5px solid #f00;
}
    

以上代码使用了伪元素:before和:after来绘制上下两个三角形，从而形成六边形的效果。其中，.hexagon定义了六边形的宽高和背景颜色，并设置了相对定位。

接着, 使用伪元素:before和:after分别绘制上下两个三角形。具体来说，他们的宽度都是0，通过border-left和border-right两个属性的相加，来设置三角形的宽度。这两个属性设置透明即可达到三角形的形状。

:before的top值为负数，表示在.hexagon的顶部，再通过border-bottom的高度来定义三角形的高度。同样的，:after的bottom值为负数，表示在.hexagon的底部，通过border-top来定义三角形的高度。

这样，.hexagon就被成功的画成了六边形。

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