Create arrowed background with CSS using repeating-gradient and blend-mode - css

Question

I thought about creating a background with arrows. Something that looks like in this codepen: http://codepen.io/DaSch/pen/rrWAmy
.top {
height: 5em;
background:
repeating-linear-gradient(
45deg,
lightgray,
lightgray 25%,
gray 0,
gray 50%
);
background-size: 5em 5em;
}
.bottom {
height: 5em;
background:
repeating-linear-gradient(
135deg,
lightgray,
lightgray 25%,
gray 0,
gray 50%
);
background-size: 5em 5em;
}
In the given example there are two elements but together to make it look like I want it to. If I but the gradients together I just get strips. I tried a lot but I can't figure out how to create arrows. with multiple gradients an background-blend-mode.
I'm not sure if this is possible. But I'm looking for a solution without external background-images. If it's not possible a good explanation why would be great.

Answer 1

Here is what I have. It looks like an arrow, and can be repeated using JavaScript. I can't do this with pure CSS. Maybe this solution gives you an idea for your code.
.top {
height: 5em;
width:80px;
margin-left:120px;
background:
repeating-linear-gradient(
45deg,
white,
white 25%,
gray 0,
gray 50%
);
background-size: 5em 5em;
}
.bottom {
height: 5em;
width:80px;
margin-left:120px;
background:
repeating-linear-gradient(
135deg,
white,
white 25%,
gray 0,
gray 50%
);
background-size: 5em 5em;
}
.middle
{
background-color:gray;
height:30px;
width:200px;
margin-right:10px;
}
.maskCornerTop
{
width:40px;
height:40px;
position:relative;
background-color:white;
float:right;
}
.maskCornerBottom
{
width:40px;
height:40px;
background-color:white;
float:right;
margin-top:40px;
position:relative;
}
<div class="top"><div class="maskCornerTop"></div></div>
<div class="middle"></div>
<div class="bottom"><div class="maskCornerBottom"></div></div>
<br/>
<div class="combo"></div>

Answer 2

After some research I found, that the solution is to overlay different backgrounds and use only the half hight for the upper one.
It'll look like this
.combo {
height: 10em;
background:
repeating-linear-gradient(
45deg,
lightgray,
lightgray 33.33%,
gray 33.33%,
gray 66.66%
),
repeating-linear-gradient(
135deg,
gray,
gray 25%,
lightgray 25%,
lightgray 50%
);
background-size: 10em 50%, 10em 100%;
background-repeat: repeat-x, repeat-x;
}
Still this maybe isn't the best solution as it only works if the height of the container is known and fixed.