如何使用CSS渐变创建无缝可重复的图案背景

问题原因 #

你的垂直渐变（90度）的渐变轴和背景块宽度方向完全重合，百分比阈值直接对应背景块宽度，所以可以自然拼接成连续线条。但-45度斜向渐变的渐变轴是背景块的对角线方向，长度为背景块边长的√2倍，沿用和垂直渐变相同的百分比阈值时，相邻背景块的线条起止位置无法对齐，就会出现断裂。

解决方法 #

最简便的方案是把渐变的百分比阈值替换为固定像素值，不用额外计算角度对应的百分比，就能实现无缝拼接。你原来20%、25%的阈值对应30px背景块的6px、7.5px位置，修改后的代码如下：

body {
  background-image: 
    linear-gradient(90deg, transparent 6px, black 6px, black 7.5px, transparent 7.5px), 
    linear-gradient(-45deg, transparent 6px, black 6px, black 7.5px, transparent 7.5px);
  background-size: 30px 30px, 30px 30px;
}

如果需要调整线条宽度，直接修改6px和7.5px的差值即可，差值就是线条的宽度。

内容的提问来源于stack exchange，提问作者mathias5