[分享]css六边形围绕

CSS六边形围绕是一种非常有趣的样式效果，可以为网页增添活力和美观。它实际上是通过CSS的绝对定位和伪元素来实现的。六边形样式代码： .hexagon { : relative; display: i...

CSS六边形围绕是一种非常有趣的样式效果，可以为网页增添活力和美观。它实际上是通过CSS的绝对定位和伪元素来实现的。

六边形样式代码：

.hexagon {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 55px;
  margin: 25px;
}

.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: 28px solid #ccc;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 28px solid #ccc;
} 

在这段代码中，我们使用了一个伪元素:before来模拟六边形的下半部分，而另一个伪元素:after则模拟了六边形的上半部分。

为了实现围绕的效果，我们需要将这些六边形都放在一个容器（例如div）中，并设置容器的position为relative，同时设置每个六边形的position为absolute。接着，我们就可以设置每个六边形的top和left属性，使它们分布在容器中心点的周围。最后，我们需要继续使用伪元素来实现六边形之间的连接。

具体实现方法可以参考下面的代码：

.container {
  position: relative;
  width: 500px;
  height: 500px;
}

.hexagon1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hexagon2 {
  position: absolute;
  top: 40%;
  right: 0;
}

.hexagon3 {
  position: absolute;
  top: 60%;
  right: 0;
}

.hexagon4 {
  position: absolute;
  bottom: 40%;
  right: 0;
}

.hexagon5 {
  position: absolute;
  bottom: 60%;
  right: 0;
}

.hexagon6 {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
}

.container:before,
.container:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 3px;
  background-color: #ccc;
}

.container:before {
  top: 50%;
  left: 0;
}

.container:after {
  bottom: 50%;
  right: 0;
} 

以上代码是一个简单的六边形围绕效果实现，可以根据自己的需求进行调整。使用CSS六边形围绕是一种很有创意和趣味的网页设计，不仅可以吸引用户的关注，还可以使网页内容更加丰富和有趣。