[分享]css六边形代码

CSS六边形是一种利用CSS编写的图形，它和普通的矩形或圆形不同，拥有独特的形状和美观的风格。下面是一些CSS六边形的代码：.hexagon { : relative; width: 150px; h...

CSS六边形是一种利用CSS编写的图形，它和普通的矩形或圆形不同，拥有独特的形状和美观的风格。下面是一些CSS六边形的代码：

.hexagon {
  position: relative;
  width: 150px;
  height: 86.6px; 
  background-color: #6C7A89;
  margin: 43.3px 0;
  border-left: solid 10px #fff;
  border-right: solid 10px #fff;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 106.1px;
  height: 106.1px;
  background-color: #6C7A89;
  left: 21.95px;
}

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

.hexagon:after {
  bottom: -53.05px;
  transform: rotate(-60deg);
} 

在这里，我们定义了一个类名为“hexagon”的CSS样式，它包括了一个矩形框，以及两个旋转的三角形。通过利用伪元素:before和:after，我们可以让这个六边形图形更加完整，同时也增加了它的美感。同时，我们还设置了矩形框的颜色、大小、边框，以及相对定位等属性，来完成这个六边形的显示。

如果您需要使用CSS来创建您自己的六边形图形，那么以上这些代码可以为您提供一些灵感和指引。记得根据实际情况来调整颜色、大小、边框、位置等属性，以满足您的需求。