css实现6边形容器

最近在学习 CSS，发现有一个很有趣的玩意儿：六边形容器。这种容器不仅好看，而且可以用来制作各种有趣的布局。今天就来跟大家分享如何使用 CSS 实现六边形容器。

.hexagon {
  position: relative;
  width: 200px;
  height: 115.47px;
  background-color: #6C5B7B;
  margin: 57.74px 0;
}

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

.hexagon:before {
  bottom: 100%;
  border-bottom: 57.73px solid #6C5B7B;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 57.73px solid #6C5B7B;
}

css实现6边形容器

以上代码实现了一个六边形容器，其中 .hexagon 是容器的类名，使用了绝对定位来定义容器的宽度和高度。背景颜色使用了 #6C5B7B，可以根据需要自己修改颜色。

容器的六个边是通过伪元素 before 和 after 来定义的，其中 before 定义了下半部分的三个边，after 定义了上半部分的三个边。使用了 border 属性来设置边框的样式和宽度，通过 transparent 和实际颜色的搭配，达到了六边形的效果。

需要注意的是，伪元素的 content 属性必须要有，否则无法正常显示。同时，要调整伪元素的位置，可以使用 top、bottom、left、right 属性。

这样，我们就成功地实现了一个六边形容器。可以在容器内继续添加文本或其他元素，来完成自己想要的布局效果。希望这篇文章对大家有所帮助！

相关推荐