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

使用具有内部重复模式的整页 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>

Answer 2

这里有一个不同的想法，可以使用 conic-gradient() 创建它，这可能会减少这种不良影响，因为我们将只依赖两个梯度

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;
}

如何使用 CSS 创建之字形图案

How to create a zig zag pattern using CSS

html

css

background

linear-gradients