[分享]css六角形图

CSS六角形图是在web设计中常用的一种图形，它可以用来装饰页面、做图标等等。下面我们将来简单介绍如何使用CSS代码来实现六角形图。.hexagon { width: 120px; height: 6...

CSS六角形图是在web设计中常用的一种图形，它可以用来装饰页面、做图标等等。下面我们将来简单介绍如何使用CSS代码来实现六角形图。

.hexagon {
   width: 120px;
   height: 69.28px;
   position: relative;
   margin: 34.64px 0;
   background-color: #64C7CC;
   float: left;
   margin-right: 5px;
   margin-left: -20px;
}

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

.hexagon::before {
   bottom: 100%;
   border-bottom: 34.64px solid #64C7CC;
}

.hexagon::after {
   top: 100%;
   width: 0;
   border-top: 34.64px solid #64C7CC;
} 

如上所述，我们需要设置一个外框，然后使用伪类::before和::after来创建六边形的上下部分。同时，我们需要通过margin和position等属性来控制六边形的位置和大小。在此基础上，我们就可以轻松实现CSS六角形图了。

当然，在实际应用中，我们也可以对这些代码进行修改和改进，以满足我们的实际需求。希望这篇文章能够对你有所帮助，谢谢！