html加css画正六边形

可以通过CSS的transform属性来实现一个正六边形，代码如下：

<div class="hexagon"></div>

.hexagon {
  width: 100px;
  height: 55px;
  background-color: #f00;
  position: relative;
}
.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
.hexagon:before {
  bottom: 100%;
  border-bottom: 27.5px solid #f00;
}
.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 27.5px solid #f00;
}

通过设置div的宽高以及背景色，可以实现一个正六边形。其中:before和:after伪元素设置了两个三角形，通过定位和transform属性旋转90度，然后拼接在一起，形成了一个正六边形的形状。