css3制作六边体

CSS3 制作六边体

使用 CSS3 可以创建六边形效果，主要通过 clip-path 属性或 transform 旋转实现。以下是两种常见方法：

方法一：使用 clip-path 属性

clip-path 允许通过多边形路径裁剪元素，形成六边形。

<div class="hexagon"></div>

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

方法二：使用 transform 旋转

通过叠加两个矩形并旋转，模拟六边形效果。

<div class="hexagon-container">
  <div class="hexagon-hex"></div>
</div>

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

.hexagon-hex {
  width: 100%;
  height: 100%;
  background-color: #e74c3c;
  position: absolute;
}

.hexagon-hex:before, .hexagon-hex:after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: inherit;
  position: absolute;
  top: 0;
  left: 0;
}

.hexagon-hex:before {
  transform: rotate(60deg);
}

.hexagon-hex:after {
  transform: rotate(-60deg);
}

注意事项

• clip-path 的兼容性较好，但需注意旧版本浏览器的支持情况。
• 旋转方法需要更多计算，适合复杂交互场景。
• 六边形的宽高比例需符合数学关系（高度 ≈ 宽度 × 1.1547）。