如何使用 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.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>