[分享]css六边形怎么设置

在网站设计中，六边形元素的使用越来越广泛。在 CSS 中，我们可以使用 transform 和 clip-path 属性来制作六边形。

.hexagon {
  width: 100px;
  height: 55px;
  background-color: #27ae60;
  position: relative;
  transform: rotate(-30deg);
  margin: 27.5px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -25px;
  width: inherit;
  height: inherit;
  background-color: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

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

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

以上代码中，我们首先创建一个 div 元素，并将它调成六边形状。我们将 div 元素的宽度设置为 100px、高度设置为 55px，并使用 transform: rotate(-30deg) 让它以 30 度的角度旋转。

接着，我们使用伪元素 :before 和 :after 来创建另外两个三角形，将它们分别放在六边形的上方和下方。我们让这两个三角形也具有六边形的形状，并使用 clip-path 属性剪切这两个三角形。

最后，我们将两个三角形都以 60 度的角度旋转，并将它们放到合适的位置。这样，我们就成功地创建了一个六边形元素。