css制作六边形
使用 CSS 制作六边形
方法一：使用 clip-path 属性
通过 clip-path 可以直接裁剪元素为六边形形状，代码简洁且兼容性较好。
.hexagon {
width: 100px;
height: 110px;
background-color: #3498db;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}方法二：伪元素叠加
利用两个伪元素（::before 和 ::after）旋转并定位，形成六边形的顶部和底部。
.hexagon {
width: 100px;
height: 60px;
background-color: #3498db;
position: relative;
}
.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: 30px solid #3498db;
}
.hexagon::after {
top: 100%;
border-top: 30px solid #3498db;
}方法三：SVG 内联
直接使用 SVG 绘制六边形，通过 CSS 控制尺寸和颜色。
<div class="hexagon">
<svg viewBox="0 0 100 100" width="100" height="100">
<polygon points="50,0 100,25 100,75 50,100 0,75 0,25" fill="#3498db" />
</svg>
</div>注意事项
clip-path方法需注意浏览器兼容性（如旧版 IE 不支持）。- 伪元素方法需精确计算边框宽度与高度比例，以保持六边形对称。
- SVG 方法适合需要动态修改颜色或尺寸的场景。
扩展：旋转六边形
通过 transform: rotate(30deg) 可调整六边形角度，但需同步调整 clip-path 或伪元素的坐标。
