[分享]css写的六边形代码

CSS写的六边形代码是前端开发一个非常有用的技巧。六边形是一种独特的形状，可用于制作图标、重点突出区域和背景图案等。以下是 CSS 六边形代码：.hexagon { width: 100px; hei...

CSS写的六边形代码是前端开发一个非常有用的技巧。六边形是一种独特的形状，可用于制作图标、重点突出区域和背景图案等。以下是 CSS 六边形代码：

.hexagon {
    width: 100px;
    height: 55px;
    position: relative;
    background-color: #6c757d;
    margin: 27.5px 0;
    border-left: solid 5px #3f4448;
    border-right: solid 5px #3f4448;
}

.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 #6c757d;
}

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

首先，我们定义了 .hexagon 类。该类定义了六边形的基本形状和颜色，包括宽度、高度、位置、背景颜色和外边框。接下来，我们使用伪元素 :before 和 :after 来创建两个三角形，组合成一个完整的六边形形状。

通过在:before 和 :after 伪元素中设置 border-left 和 border-right 属性，我们可以创建两个隐藏的、具有透明背景的三角形。通过在:before 伪元素上设置 bottom 和 border-bottom 属性，我们可以将第一个三角形定位在底部并创建两侧较长的三角形。通过在:after 伪元素上设置 top 和 border-top 属性，我们可以将第二个三角形定位在顶部并创建两侧较短的三角形。这样，两个三角形组合在一起就形成了一个六边形形状。

如果你想制作不同大小、不同颜色或不同形状的六边形，请根据需要调整上述代码。