Repeating background with an increment - css

Question

I'm struggling with a bit of CSS, I want a black bar to show every X amount of pixels but I'd want it to increment by about 10px every time it is shown.
E.g first bar appears at 100px, second at 110 and the third at 120.
So far I have used the following background style to achieve the first part (show a bar every X pixels) but it isn't perfect either:
background: repeating-linear-gradient(white, white 1405px, black 210px,black 37.4cm)
Any css warrior out there that knows of a fix?
EDIT
So with a bit of trial and error I have succeeded in placing the line every 1405 pixels with the following code:
background: repeating-linear-gradient(white, white 1405px, black 1405px, black 1415px)
The problem persists however, the elements are in the place they belong, the line needs to appear after every element (hence the + 10px request).
This is what it looks like now: https://imgur.com/a/pokGCTk
It isn't always 1 element though, there might be more like so: https://imgur.com/a/veaVK44
The line still has to be placed behind the elements at a set interval (1405 pixels) but it has to increase by 10 every time. (so 1405 pixels, then after 1415 pixels, then after 1425 pixels etc.)

Answer 1

It's clear that with a simple linear-gradient we cannot have a non-regular pattern. Here is an idea using some transform and perspective to simualte your pattern where the distance between black line will grow:
body {
margin: 0;
perspective: 30px;
perspective-origin: top;
overflow: hidden;
}
.grad {
height: 100vh;
transform: rotateX(10deg);
transform-origin: bottom;
}
.grad:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -1000%;
right: -1000%;
background: repeating-linear-gradient(to bottom, #000 0, #000 10px, #fff 10px, #fff 50px);
]
<div class="grad">
</div>
Or you would need to use multiple gradient and adjust background-position. Something you can easily generate with SASS if you want many lines:
body {
margin: 0;
perspective: 30px;
perspective-origin: top;
overflow: hidden;
}
.grad {
height: 100vh;
background-image:
linear-gradient(#000,#000),
linear-gradient(#000,#000),
linear-gradient(#000,#000),
linear-gradient(#000,#000);
background-size:100% 10px ;
background-repeat:no-repeat;
background-position:
0 0,
0 50px,
0 150px,
0 300px;
}
<div class="grad">
</div>
Here a script provided by #Krypt1 to generate the above using SASS:
https://www.sassmeister.com/gist/15bd039fdd0803ed79d12762ad6da28f

Answer 2

For stripes to work exactly 10px each, you would need to change the repeating-linear-gradient to generate them every 10px from start to end. And then you can use another gradient to hide first 100px with white color, and then change to transparent to show the stripes.
Here's the snippet:
div {
width: 100%;
height: 200px;
background: linear-gradient(white, white 100px, transparent 100px, transparent),
repeating-linear-gradient(white, white 10px, black 10px, black 20px)
}
<div></div>

Answer 3

A solution which allows you to show background styling from elements behind is to use a pseudoelement positioned behind your div, and make use of rgba within your repeating-lenear-gradient to have transparent colours.
body {
background-color: #e0e0e0;
}
div {
position: relative;
height: 500px;
}
div::after {
content: '';
display: block;
position: absolute;
top: 100px;
right: 0;
bottom: 0;
left: 0;
background-image: repeating-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px);
z-index: -1;
pointer-events: none;
}
<div></div>