如何用html、css做六边形

可以使用CSS3的transform属性来实现六边形的效果。以下是一个基本的示例代码：

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

.hexagon {
  width: 100px;
  height: 55px;
  background-color: #f00;
  position: relative;
  margin: 27.5px 0;
}

.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伪元素来创建六边形的上下两个三角形。我们使用border属性来定义每个三角形的形状和颜色。我们还使用position属性将它们定位在正确的位置。

最后，我们使用margin属性将六边形垂直居中，并将其底部与上面的三角形的底部对齐。