css3制作六边形

使用CSS3制作六边形

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

方法一：使用clip-path

通过clip-path直接裁剪元素为六边形形状。这种方法简洁，但需注意浏览器兼容性。

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

• 关键参数：clip-path: polygon()通过定义六个顶点坐标形成六边形。比例需根据宽高调整。

方法二：使用伪元素和transform

通过旋转两个矩形并叠加形成六边形，兼容性更好。

.hexagon {
  width: 100px;
  height: 55px;
  background-color: #6c6;
  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);
}

• 原理：主元素为矩形，伪元素旋转±60°后叠加形成六边形轮廓。需设置position: relative和伪元素的绝对定位。

注意事项

1. 宽高比例：六边形的宽高比通常为width : height = 1 : 1.1547（基于正六边形几何）。
2. 背景覆盖：若需内容（如文字）不被裁剪，避免使用clip-path，推荐伪元素法。
3. 浏览器支持：clip-path需前缀（如-webkit-clip-path）兼容旧版本。

扩展：六边形网格

多个六边形排列成蜂窝网格时，需设置负边距和浮动布局：

.hexagon-container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  margin: -15px 0;
}
.hexagon {
  margin: 15px 5px;
}

• 布局技巧：通过负边距抵消六边形间的重叠部分，保持紧密排列。