css制作六边形
使用 CSS 制作六边形
通过 CSS 的 clip-path 属性或伪元素旋转可以轻松实现六边形效果。以下是两种常见方法：
方法一：使用 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%
);
}参数说明：
polygon()定义六边形的六个顶点坐标，按顺时针或逆时针顺序排列。- 百分比值基于元素的宽高，50% 表示中点。
方法二：伪元素旋转
通过旋转两个矩形叠加形成六边形，兼容性更好。
.hexagon {
width: 100px;
height: 60px;
background-color: #3498db;
position: relative;
}
.hexagon::before,
.hexagon::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: inherit;
}
.hexagon::before {
transform: rotate(60deg);
}
.hexagon::after {
transform: rotate(-60deg);
}注意事项：
- 伪元素需设置与父元素相同的背景色。
- 调整
width和height比例可改变六边形形状。
扩展：添加边框
若需六边形边框，可用额外嵌套元素或 outline 配合 clip-path：
.hexagon-border {
width: 102px;
height: 112px;
clip-path: polygon(
50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%
);
background: linear-gradient(45deg, #3498db, #2ecc71);
}
.hexagon-inner {
width: 98px;
height: 108px;
clip-path: inherit;
background: white;
position: relative;
top: 2px;
left: 2px;
}提示：
- 现代项目优先选择
clip-path，代码更简洁。 - 需兼容旧浏览器时，可采用伪元素方案或 SVG 替代。
