当前位置：首页 > CSS

css如何制作蜂巢

2026-04-02 09:10:25CSS

使用CSS制作蜂巢效果

蜂巢效果可以通过CSS的clip-path属性或transform属性实现。以下是两种常见的方法：

使用clip-path属性

通过clip-path定义六边形路径，将元素裁剪为六边形形状。

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

使用transform属性

通过旋转和位移实现蜂巢排列。

.hexagon-container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
}

.hexagon {
  width: 60px;
  height: 104px;
  background-color: #4ecdc4;
  margin: 0 2px;
  position: relative;
}

.hexagon:nth-child(even) {
  transform: translateY(52px);
}

蜂巢网格布局

结合伪元素和绝对定位，创建完整的蜂巢网格。

.hex-grid {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  gap: 10px;
}

.hex-cell {
  width: 100px;
  height: 115px;
  position: relative;
}

.hex-cell::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #5f27cd;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

响应式蜂巢

使用CSS变量和calc()函数实现响应式蜂巢。

css如何制作蜂巢

:root {
  --hex-size: 10vw;
}

.responsive-hex {
  width: var(--hex-size);
  height: calc(var(--hex-size) * 1.1547);
  background: #1dd1a1;
  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );
}

这些方法可以根据具体需求进行调整，比如改变颜色、大小或排列方式。clip-path方法在现代浏览器中兼容性较好，而transform方法在需要兼容旧浏览器时可能更实用。