当前位置：首页 > CSS

css制作六边形

2026-01-15 11:44:58CSS

使用 CSS 制作六边形

方法一：使用 `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 中的百分比值为六边形六个顶点的坐标，依次为：顶部中点、右上角、右下角、底部中点、左下角、左上角。

方法二：利用伪元素旋转

通过旋转伪元素叠加实现六边形效果，兼容性较好。

.hexagon {
  width: 100px;
  height: 57.74px; /* 高度 = 宽度 × (√3 / 2) */
  background-color: #3498db;
  position: relative;
  margin: 28.87px 0; /* 边距 = 高度 / 2 */
}

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

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

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

关键点：

六边形高度与宽度的比例为 √3/2（约 0.866）。
伪元素通过旋转 60° 和 -60° 补全六边形的另外两部分。

方法三：SVG 内联

直接使用 SVG 绘制六边形，嵌入到 HTML 中。

<svg width="100" height="115" viewBox="0 0 100 115">
  <polygon points="50 0, 100 25, 100 75, 50 100, 0 75, 0 25" fill="#3498db" />
</svg>

优势：

SVG 为矢量图形，缩放无损清晰度。
可通过 CSS 控制填充色和动画。

六边形布局技巧

若需将多个六边形拼接为蜂窝网格，需注意以下 CSS：

.hex-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: 50px; /* 偏移半个六边形宽度 */
}

.hexagon {
  margin-right: -25px; /* 重叠部分 */
  margin-bottom: -14px; /* 垂直重叠 */
}

原理：