How to create this css pattern background?

Question

I'm trying to create a repeatable background in CSS, using multiple gradients. However it does not really work as intended.

I got this JsFiddle to show my progress

The problem is that i don't get the diagonal lines to connect to long ones, as the vertical. How would i achieve that? The goal is to make it seamless.

Code:

body {
  background-image: linear-gradient(90deg, transparent 20%, black 25%, transparent 25%), linear-gradient(-45deg, transparent 20%, black 25%, transparent 25%);
  background-size: 30px 30px, 30px 30px;
}

Answer 1

Maybe with repeating gradient:

body {
  min-height:100vh;
  margin:0;
  background: 
    repeating-linear-gradient(90deg, #0000 0 27px, black 0 30px), 
    repeating-linear-gradient(-45deg,#0000 0 27px, black 0 30px);
}