css如何制作六边形

2026-01-27 23:31:42CSS

使用CSS制作六边形

通过CSS的clip-path属性可以轻松创建六边形形状。以下是一个简单的实现方法：

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

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

使用伪元素创建六边形边框

如果需要带边框的六边形，可以使用伪元素：

css如何制作六边形

.hexagon-border {
  width: 100px;
  height: 110px;
  position: relative;
  background-color: #64C7CC;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hexagon-border::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background-color: white;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

使用transform旋转正方形

另一种方法是旋转正方形元素：

css如何制作六边形

.hexagon-transform {
  width: 100px;
  height: 100px;
  background-color: #64C7CC;
  position: relative;
  transform: rotate(30deg);
}

.hexagon-transform::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #64C7CC;
  transform: rotate(60deg);
}

响应式六边形

创建会根据容器大小调整的响应式六边形：

.hexagon-responsive {
  width: 20%;
  height: 0;
  padding-bottom: 23.09%; /* 高度/宽度比例 ≈ 1.1547 */
  background-color: #64C7CC;
  position: relative;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

六边形网格布局

创建六边形网格需要更复杂的CSS：

.hex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

.hex-cell {
  width: 100px;
  height: 115px;
  background-color: #64C7CC;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  margin: 0 auto;
}

这些方法提供了从简单到复杂的六边形创建方案，可以根据具体需求选择最适合的实现方式。