[分享]css写一个六边形

在CSS中，我们可以使用伪元素和旋转来实现一个六边形的样式，具体代码如下：

.hexagon {
  width: 100px;
  height: 55px;
  position: relative;
  overflow: hidden;
}

.hexagon:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-60deg);
  background: #ccc;
}

.hexagon:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(60deg);
  background: #ccc;
} 

首先，我们创建一个容器元素，在其中使用伪元素来实现六边形的效果。在:before伪元素中，我们使用css属性transform:rotate(-60deg)来实现一个向左旋转60度的三角形，而在:after伪元素中则是一个向右旋转60度的三角形。

由于我们使用了伪元素，因此需要将容器元素的position属性设置为相对定位，而伪元素的position属性则应该设置为绝对定位，并将top和left属性都设置为0，以将它们放在容器元素的最左上角。

最后一步是将容器元素的overflow属性设置为hidden，以防止伪元素超出容器元素的范围。

通过以上的CSS代码，我们可以轻松地实现一个漂亮的六边形形状，而且能够适应不同的大小和颜色。在实际应用中，可以根据需要进行一些微调，以符合具体的设计要求。