不规则图形背景排版高阶技巧 — 酷炫的六边形网格背景图
今天，收到一个很有意思的提问，如何实现类似如下的背景效果图：
嗯？核心主体是由多个六边形网格叠加形成。
那么我们该如何实现它呢？使用纯 CSS 能够实现吗？
当然可以，下面我们就将尝试如何使用 CSS 去实现这样一个背景效果。
如何绘制六边形？
首先，看到这样一个图形，如果想要使用一个标签完成整个背景，最先想到的肯定是使用背景 background 实现，不过可惜的是，尽管 CSS 中的 background 非常之强大，但是没有特别好的方式让它足以批量生成重复的六边形背景。
因此，在这个需求中，我们可能不得不退而求其次，一个六边形实现使用一个标签完成。
那么，就拿 1 个 DIV 来说，我们有多少实现六边形的方式呢？这里简单介绍 2 种方式：
- 使用 border 实现六边形
- 使用 clip-path 实现六边形
使用 border 或者 clip-path 实现六边形
首先，使用 border 实现六边形。这里的核心在于上下两个三角形叠加中间一个矩形。这里，利用元素的两个伪元素实现上下两个三角形，从而让这个元素看起来像一个六边形。
思路比较简单，直接上代码：
.hexagon {
position: relative;
width: 200px;
height: 100px;
background-color: red;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 50px solid red;
}
.hexagon:after {
top: 100%;
border-top: 50px solid red;
}
<< · Back Index ·>>
