title: CSS Background Stripes on div
body: <p>So I have a square div and i'm trying to get the background to basically look like this :</p>
  
  <p><a href="https://i.stack.imgur.com/N27Sp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/N27Sp.png" alt="enter image description here"></a></p>
  
  <p>I've had a look around, and since this question has been asked a lot i've seen CSS gradients used.</p>
  
  <p>I've been playing about and ended up with:</p>
  
  <pre><code>background-image: linear-gradient(
    180deg, rgba(255, 255, 255, .2) 29%,
    transparent 20%,
    transparent 51%,
    rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%,
    transparent 75%,
    transparent);
  </code></pre>
  
  <p>However, gradients seem to blend the colours from one to another instead of having a sharp difference like below.</p>
  
  <p>What should  I be doing to achieve the picture?</p>