使用CSS制作六边形形状

的方法有很多种，本文将介绍一种使用CSS伪元素来制作六边形形状的方法。

.hexagon {
  position: relative;
  margin: 20px auto;
  width: 150px;
  height: 86.6px;
  background-color: #f00;
}

.hexagon:before {
  content: "";
  position: absolute;
  top: -43.3px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 86.6px solid #f00;
}

.hexagon:after {
  content: "";
  position: absolute;
  bottom: -43.3px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-top: 86.6px solid #f00;
}

上面的代码是使用CSS伪元素来制作六边形形状的基本代码，其中的width和height属性是用来控制六边形的大小的，background-color属性是用来控制六边形的颜色的。

除了上面的代码，我们还可以使用CSS3的transform属性来旋转六边形，以便让它可以放置在不同的角度上：

.hexagon {
  position: relative;
  margin: 20px auto;
  width: 150px;
  height: 86.6px;
  background-color: #f00;
  transform: rotate(30deg);
}

使用transform属性可以让六边形旋转30度，从而使它可以放置在不同的角度上。

我们还可以使用CSS3的border-radius属性来让六边形变成圆形：

.hexagon {
  position: relative;
  margin: 20px auto;
  width: 150px;
  height: 86.6px;
  background-color: #f00;
  border-radius: 50%;
}

使用border-radius属性可以让六边形变成圆形，从而使它看起来更加圆润。

使用CSS来制作六边形形状是一件非常容易的事情，只需要简单的几行代码就可以实现。使用CSS伪元素、transform属性和border-radius属性可以让我们轻松地制作出各种各样的六边形形状。