[分享]CSS六边形做法

六边形一直是设计师们喜欢的形状之一。由于 CSS 提供的默认形状只有矩形和圆形，所以构建六边形通常需要一些技巧。本文将介绍两种构建 CSS 六边形的方法，分别是使用 border 和使用 transf...

六边形一直是设计师们喜欢的形状之一。由于 CSS 提供的默认形状只有矩形和圆形，所以构建六边形通常需要一些技巧。本文将介绍两种构建 CSS 六边形的方法，分别是使用 border 和使用 transform。

/* 使用 border 构建 */
.hexagon {
  width: 100px;
  height: 55px;
  position: relative;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.hexagon:before {
  top: -25px;
  border-bottom: 25px solid #ccc;
}

.hexagon:after {
  bottom: -25px;
  border-top: 25px solid #ccc;
}

/* 使用 transform 构建 */
.hexagon-2 {
  width: 100px;
  height: 55px;
  position: relative;
  transform: rotate(60deg);
}

.hexagon-2:before,
.hexagon-2:after {
  content: "";
  position: absolute;
  width: inherit;
  border-top: 25px solid #ccc;
  z-index: -1;
}

.hexagon-2:before {
  right: -50px;
  transform: rotate(-60deg);
}

.hexagon-2:after {
  left: -50px;
  transform: rotate(60deg);
} 

以上是两种常见的构建 CSS 六边形的方式。使用 border 的方式需要了解 border 的基本属性和选择器的伪元素，而使用 transform 的方式需要了解 transform 和伪元素的定位。建议选择适合自己的方式，来构建自己所需要的六边形。