如何使用 CSS 创建锯齿形图案

Question

在重复背景上，重复图块的边缘在某些缩放级别上不会完全对齐。 这会导致不需要的边缘，因为背景的颜色在这个 1px 的间隙中是可见的。

我已经做了一些背景阅读并理解这可能是由于缩放导致的十进制像素值的舍入错误。 将背景图块的大小调整几个像素可以消除一个缩放级别的问题（因为缩放后的图像尺寸是整数值），但显然会破坏其他缩放值。

稍微重叠背景图块可能会起作用，但我不确定如何通过重复背景来实现这一点。 禁用缩放是另一种选择，但如果可能，我想防止这种情况发生。

如下所示的代码显示了 Chrome 中将缩放设置为 85% 时的问题（甚至更糟的是 63%）：

 #header { background: linear-gradient(135deg, #ECEDDC 24.9%, transparent 25.1%) -70px 0, linear-gradient(225deg, #ECEDDC 24.9%, transparent 25.1%) -70px 0, linear-gradient(315deg, #ECEDDC 24.9%, transparent 25.1%), linear-gradient(45deg, #ECEDDC 24.9%, transparent 25.1%); background-size: 140px 140px; background-color: #29AB87; width: 100vw; height: 100vh; }

 <div id="header"></div>

问题截图：

Answer 1

这是使用conic-gradient()创建它的不同想法，它可以减少这种不良影响，因为我们将仅依赖两个渐变，但这实际上仅在 chrome 中受支持

 body { background: conic-gradient( #ECEDDC 0 0.125turn, transparent 0.126turn 0.874turn, #ECEDDC 0.875turn 1turn), conic-gradient( transparent 0 0.375turn, #ECEDDC 0.376turn 0.624turn, transparent 0.625turn 1turn) 70px 0.8px, #29AB87; background-size: 140px 140px; margin:0; height: 100vh; }

您会注意到我在色0.001turn中使用了0.001turn的细微差异以避免锯齿状边缘，并且我还将第二个渐变转换了0.8px以创建小的重叠并避免间隙。

---

为了获得更好的支持和更好的渲染，请考虑如下 SVG：

 body { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" ><polygon fill="%23ECEDDC" points="0,0 20,0 10,10"/></svg>'), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" ><polygon fill="%23ECEDDC" points="0,20 20,20 10,10"/></svg>') 70px 0, #29AB87; background-size: 140px 140px; margin:0; height: 100vh; }

Answer 2

使用带有内部重复模式的整页 SVG 似乎可以最平滑地缩放

 html, body { margin: 0; } svg { position: absolute; }

 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">    <pattern id="p1" width="10" height="10" patternUnits="userSpaceOnUse" > <polygon points="0,0 5,5 10,0 10,5 5,10, 0,5" fill="#ECEDDC" />  </pattern> <rect width="100%" height="100%" fill="#29AB87" /> <rect width="100%" height="100%" fill="url(#p1)" /> </svg>