Infinite chevron line - css

Question

I don't how it can't be named in english - I neither don't know in french to be honest - but I need to design an infinite line composed by normal and invert chevron. It's seems to be called a chevron line.
Here's an example of what I want and I only need one line :
Here what I've done so far with before and after pseudo elements. Maybe there's another way that i can't think of. Right now i didn't achieve to display it as chevron, i don't understand how repeating linear gradient works for the position.
.chevron-line {
position: relative;
height: 15px;
background: white;
}
.chevron-line::before,
.chevron-line::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.chevron-line::before {
background: repeating-linear-gradient(135deg,
#000, #000 5px /* black stripe */,
transparent 0, transparent 20px /* blue stripe */
);
}
.chevron-line::after {
background: repeating-linear-gradient(-135deg,
transparent 0px, transparent 10px /* blue stripe */,
#000, #000 15px /* black stripe */,
transparent 0px, transparent 20px /* blue stripe */
);
}
<div class="chevron-line"></div>

Answer 1

you can do this with css gradient
div.box {
height: 500px;
background:
linear-gradient(135deg, #ffffff 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ffffff 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ffffff 25%, transparent 25%),
linear-gradient(45deg, #ffffff 25%, transparent 25%);
background-size: 100px 100px;
background-color: #000000;
}
<div class="box">
</div>
make it thin like this
div.box {
height: 500px;
background:
linear-gradient(135deg, #ffffff 35%, transparent 35%) -50px 0,
linear-gradient(225deg, #ffffff 35%, transparent 35%) -50px 0,
linear-gradient(315deg, #ffffff 35%, transparent 35%),
linear-gradient(45deg, #ffffff 35%, transparent 35%);
background-size: 100px 100px;
background-color: #000000;
}
<div class="box"></div>