css如何制作蜂巢

使用 CSS 创建蜂巢效果

使用 clip-path 属性

clip-path 可以裁剪元素为六边形形状。通过定义六个顶点坐标，可以创建标准的蜂巢六边形。

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

使用 transform 旋转

通过旋转六边形元素，可以模拟蜂巢的紧密排列效果。结合 margin 或 position 调整间距。

.hexagon {
  width: 100px;
  height: 86.6px; /* 高度为宽度的 √3/2 倍 */
  background-color: #f0f0f0;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  transform: rotate(30deg);
}

网格布局

通过 CSS Grid 或 Flexbox 排列多个六边形，形成蜂巢结构。奇数行和偶数行需要错开位置。

.hex-grid {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
}

.hexagon {
  width: 100px;
  height: 86.6px;
  margin: 0 5px 10px 5px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* 奇数行偏移 */
.hexagon:nth-child(odd) {
  transform: translateX(50px);
}

伪元素叠加

通过 ::before 和 ::after 伪元素扩展六边形的视觉效果，增加立体感。

.hexagon {
  position: relative;
  width: 100px;
  height: 86.6px;
  background-color: #3498db;
}

.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: 28.87px solid #3498db;
}

.hexagon::after {
  top: 100%;
  border-top: 28.87px solid #3498db;
}

动画效果

为蜂巢添加悬停动画，增强交互性。

.hexagon {
  transition: transform 0.3s ease;
}

.hexagon:hover {
  transform: scale(1.1) rotate(5deg);
  z-index: 10;
}

关键注意事项

• 六边形高度与宽度的比例应为 √3/2 ≈ 0.866，确保紧密排列。
• 使用 clip-path 时注意浏览器兼容性，旧版本需加 -webkit- 前缀。
• 网格布局中，奇数行偏移量应为六边形宽度的一半。