css写六角形 |css 底部浮动于底部

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

以上代码将绘制一个宽度为100像素、高度为55像素、边长和角度均相等的六边形，颜色为灰色。在这个例子中，前后伪元素的上边界恰好与六边形的下边界重合，分别放置在左右两端。

可以通过改变“border-bottom”属性的值，定义六边形的颜色。若需要改变六边形的大小，可通过相应的修改“width”和“height”属性来实现。此外，通过调整“top”属性的值以及伪元素的位置，可以使前后两个三角形重叠、交溶，产生不同的视觉效果。

在实际的项目中，可以将CSS绘制的六边形作为图片的替代品，使用在导航、表格和其他网页元素中，有效增强页面的可读性和吸引力。