css3制作六边形

使用 CSS3 制作六边形

六边形可以通过 CSS3 的 clip-path 属性或 transform 属性结合伪元素实现。以下是两种常见方法：

方法一：使用 clip-path

通过 clip-path 直接裁剪出一个六边形。这种方法简单且现代浏览器支持良好。

.hexagon {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

• width 和 height 定义六边形的尺寸。
• clip-path: polygon() 通过六个顶点坐标定义六边形形状。

方法二：使用伪元素和 transform

通过伪元素旋转和定位实现六边形效果，兼容性更好。

.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;
}

• 主元素是一个矩形，定义六边形的中间部分。
• :before 和 :after 伪元素通过边框生成三角形，拼合成六边形。

方法三：使用 SVG 路径

通过内联 SVG 的 path 定义六边形，适合需要复杂交互的场景。

<svg width="100" height="100" viewBox="0 0 100 100">
    <path d="M25 0 L75 0 L100 50 L75 100 L25 100 L0 50 Z" fill="#3498db" />
</svg>

• d 属性定义了六边形的路径，坐标与方法一的 clip-path 类似。

注意事项

• clip-path 的兼容性较好，但在旧版本浏览器中可能需要前缀（如 -webkit-clip-path）。
• 伪元素方法需要精确计算边框宽度和高度，确保六边形对称。
• SVG 方法适合需要动态修改形状的场景，但会增加 HTML 复杂度。

以上方法均可实现六边形效果，可根据项目需求选择合适方案。