今天收到一个很有意思的问题，如何实现类似下面这样的背景效果图：咦？核心体由多个六边形网格叠加而成。那么我们如何实现呢？这可以用纯CSS实现吗？当然，下面我们将尝试如何使用CSS来实现这样的背景效果。如何画六边形？首先，看到这样的图形，如果要用一个标签来完成整个背景，你首先想到的就是使用background背景，可惜的是，CSS中的背景虽然很强大，但是没有特别好的方法是批量生成重复的六边形背景就足够了。因此，在这个要求中，我们可能不得不满足于次优的选择，即使用标签的六边形实现。那么，只取1个DIV，我们有多少种方法可以实现一个六边形呢？这里有两种方式：使用border实现六边形使用clip-path实现六边形使用border或者clip-path实现六边形首先，使用border实现六边形。这里的核心是上下三角形叠加了一个中间的矩形。这里用元素的两个伪元素来实现上下三角形，让元素看起来像一个六边形。思路比较简单，直接添加代码即可：.hexagon{position:relative;宽度：200px；高度：100px；背景色：红色；}.hexagon:before,.hexagon:after{content:"";位置：绝对；宽度：0；高度：0；左边框：100px实心透明；border-right:100pxsolidtransparent;}.hexagon:before{bottom:100%;border-bottom:50pxsolidred;}.hexagon:after{top:100%;border-top:50pxsolidred;}上面的代码创建了一个宽度为200像素、高度为100像素的六边形，由两个三角形和一个矩形组成。使用伪元素的好处是可以很方便地控制六边形的大小、颜色等样式。当然，上面的代码并不是正六边形，因为在正六边形中，元素的高度是元素宽度的1.1547倍。而且上面的方法比较复杂，所以今天推荐使用clip-path的方法来实现一个六边形：.clippath{--w:100px;宽度：var(--w);高度：计算（var（--w）*1.1547）；剪辑路径：多边形（0%25%、0%75%、50%100%、100%75%、100%25%、50%0%）；背景：深粉色；margin:auto;}这样，基于clip-path，就可以快速得到一个六边形图形：CodePenDemo--实现一个六边形的两种方法绘制多个六边形背景。一步一步的铺垫之后，接下来我们要做的就是绘制多个六边形来组成背景。但是如果我们仔细观察由多个六边形组成的背景，我们会发现每个双数六边形都需要向右有一个明显的缩进，宽度大约是单个六边形宽度的一半：这是实际上是一个非常棘手的问题。首先我们会想到这样一个解决方案：每一行为一组，设置一个父div容器，填充六边形元素，设置元素不换行，偶数行设置固定的margin-left。基于这个策略，我们的代码，大概是这样的：
