css3制作六边形

使用 CSS3 制作六边形

方法一：利用 clip-path 属性

通过 clip-path 可以直接裁剪元素为六边形形状。这种方法简单且现代浏览器支持良好。

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

说明：

• clip-path: polygon() 通过定义多边形的顶点坐标来裁剪元素。
• 六边形的顶点坐标按顺时针方向依次为顶部中点、右上角、右下角、底部中点、左下角、左上角。

方法二：利用伪元素旋转

通过旋转伪元素生成六边形边框，适合需要边框效果的场景。

.hexagon {
  width: 100px;
  height: 55px;
  background-color: #6a5acd;
  position: relative;
  margin: 30px 0;
}

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

.hexagon:after {
  top: 100%;
  border-top: 30px solid #6a5acd;
}

说明：

• 主元素为矩形，通过伪元素生成顶部和底部的三角形。
• 调整 border-width 可以控制六边形的高度和比例。

方法三：使用 SVG 背景

通过 SVG 生成六边形背景，适合需要复杂填充或渐变的场景。

.hexagon {
  width: 100px;
  height: 115px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 115"><polygon points="50 0, 100 25, 100 75, 50 100, 0 75, 0 25" fill="%236a5acd"/></svg>');
}

说明：

• 直接嵌入 SVG 代码作为背景，避免额外 HTTP 请求。
• 修改 fill 属性可以改变六边形的颜色。

方法四：使用 transform 旋转

通过旋转两个矩形生成六边形，适合需要动态效果的场景。

.hexagon-container {
  width: 100px;
  height: 115px;
  position: relative;
}

.hexagon-part {
  position: absolute;
  width: 100%;
  height: 60px;
  background-color: #6a5acd;
}

.hexagon-part:nth-child(1) {
  transform: rotate(60deg);
}

.hexagon-part:nth-child(2) {
  transform: rotate(-60deg);
}

说明：

• 两个矩形部分通过旋转 60° 和 -60° 叠加形成六边形。
• 需要调整高度和位置以完美拼接。

注意事项

1. 浏览器兼容性：clip-path 在旧版本浏览器中可能需要前缀或替代方案。
2. 响应式设计：使用百分比单位或 calc() 确保六边形适应不同屏幕尺寸。
3. 交互效果：为六边形添加悬停或动画时，确保裁剪区域保持一致。

以上方法可根据具体需求选择，clip-path 是最简洁的方案，而伪元素法兼容性更好。