How to create a zig zag pattern using CSS

Question

On a repeated background, the edges of the repeated tiles don't align exactly on certain zoom levels. This leads to unwanted edges as the color of the background is visible in this 1px gap.

I've done some background reading and understand this is probably due to a rounding error on decimal pixel values due to the zooming. Adjusting the size of the background tile by a couple of pixels removes the issue at one zoom level (as the scaled image dimension are then integer values), but obviously breaks other zoom values.

Slightly overlapping the background tiles might work, but I'm not sure how this can be achieved with a repeated background . Disabling zoom is another option, but I would like to prevent this if possible.

Code as shown below shows the problem in Chrome when setting the zoom to 85% (or even worse on 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>

Screenshot of the issue:

Answer 1

Here is a different idea to create this using conic-gradient() that may reduce this bad effect since we will rely on only two gradients

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

You will notice that I am using a slight difference of 0.001turn in the color stops to avoid jagged edges and I also translated the second gradient by 0.8px to create a small overlap and avoid gaps.

---

For better support and better rendering consider SVG like below:

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

Using a full page SVG with an internal repeating pattern seems to scale the most smoothly

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>