[分享]css六边形组合

六边形是一种经常出现的形状，在CSS中如何实现六边形组合呢？

.hexagon {
  width: 60px;
  height: 35px;
  position: relative;
  display: inline-block;
  margin: 0 10px 20px;
  transform: rotate(120deg);
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
}

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

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

.hexagon-container {
  margin-top: -20px;
  text-align: center;
}

.hexagon-container .hexagon:nth-of-type(2n) {
  margin-left: -35px;
}

.hexagon-container .hexagon:nth-of-type(3n) {
  margin-left: -70px;
} 

首先，我们定义一个六边形的样式，包括高度、宽度、定位等属性。然后，通过:before和:after伪元素将六边形旋转60度，共同组成一个六边形。接着，我们定义一个六边形容器，将所有六边形放到其中，并通过:nth-of-type()选择器控制其排列方式，从而实现组合效果。

通过简单的CSS样式组合，我们可以轻松实现六边形的组合效果。不仅如此，我们还可以利用这种方式，实现更多奇特形状的组合，创造出完全不同的视觉效果。