[分享]css六边形怎么做

CSS六边形是一种非常流行和有趣的形状，可以用于各种设计场景。下面我们来介绍一下如何使用CSS来创建六边形。六边形的HTML代码： 六边形的CSS代码： hexagon { width: 0; he...

CSS六边形是一种非常流行和有趣的形状，可以用于各种设计场景。下面我们来介绍一下如何使用CSS来创建六边形。

六边形的HTML代码：
<div id="hexagon"></div>

六边形的CSS代码：
#hexagon {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #ccc; /* 六边形的颜色 */
}

六边形的解释：
首先设置了六边形的宽和高为0，然后设置了左，右和下三个边的颜色。左右边的宽度都为50px，因为六边形是由两个三角形组成的，同时也是因为三角形的高等于底的一半。下边的宽度是100px，因为这是六边形顶部到底部的距离，也是底的宽度的两倍。

如果我们想要让六边形垂直居中，可以用 flex 布局实现。

六边形的HTML代码：
<div class="container">
  <div id="hexagon"></div>
</div>

六边形的CSS代码：
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#hexagon {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ccc;
}

这样就可以让六边形在容器中垂直居中了。