css 六边形

/* 六边形的 CSS 代码 */

.hexagon {
  width: 100px;
  height: 55px;
  background-color: #64C7CC;
  position: relative;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 70px;
  height: 45px;
  background-color: inherit;
  left: 15px;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

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

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

解释说明：

1. .hexagon 类:

   • 定义了一个宽度为 100px，高度为 55px 的矩形区域，并设置了背景颜色。
   • 使用 position: relative; 使得伪元素 :before 和 :after 能够相对于这个元素进行定位。

2. :before 和 :after 伪元素:

   • 这两个伪元素用于创建六边形的上部和下部三角形部分。
   • content: ""; 确保伪元素被渲染。
   • position: absolute; 使得伪元素可以相对于 .hexagon 进行绝对定位。
   • width: 70px; height: 45px; 设置了伪元素的大小。
   • border-left 和 border-right 创建了透明的左右边框，配合 background-color: inherit; 实现了与主元素相同的背景颜色。
   • transform: rotate(); 分别旋转 60deg 和 -60deg 来形成六边形的上下两个角。

通过这种方式，CSS 可以轻松地创建一个六边形形状。