[分享]css六边形布局

CSS六边形布局是一种非常受欢迎的页面布局，可以将页面呈现得漂亮、整齐、有层次感。下面我们来看看如何实现这个布局。.hexagon { : relative; width: 100px; height...

CSS六边形布局是一种非常受欢迎的页面布局，可以将页面呈现得漂亮、整齐、有层次感。下面我们来看看如何实现这个布局。

.hexagon {
  position: relative;
  width: 100px;
  height: 55px;
  background-color: #495A64;
  margin: 27.5px 0;
  display: inline-block;
}

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

.hexagon:before {
  bottom: 100%;
  border-bottom: 27.5px solid #495A64;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 27.5px solid #495A64;
} 

首先我们定义一个 .hexagon 的样式。它的位置是相对定位，宽度为 100px，高度为 55px，背景颜色为 #495A64，上下外边距为 27.5px，将其作为内联块级元素展示。

接下来我们定义两个伪元素 .hexagon:before 和 .hexagon:after。它们的内容为空，宽度为 0，使用百分比定位分别在 .hexagon 的顶部和底部。边框使用了 transparent 和 #495A64 两个颜色，实现了六边形的形状。其中底部的伪元素使用了 border-bottom，目的是将六边形倒转，使之形成完整的六边形。

最后，将这些样式应用到一个容器元素中，我们就得到了一个美观的六边形布局。每一个 .hexagon 元素都可以放置内容，以实现丰富多样的页面布局。