Alternating triangle colour background using linear-gradient in CSS3 - css

Question

I've created the following background pattern:
https://codepen.io/anon/pen/JJvbjz
CSS:
body {
background:
linear-gradient(-120deg, transparent 63%, #fff 63%),
linear-gradient(120deg, transparent 63%, #fff 63%),
linear-gradient(to bottom, blue, blue);
background-size: 90px 50px;
background-repeat: repeat-x;
}
I'd like to be able to alternate the colours of the triangles e.g. red, blue, green, red, blue, green, red, blue green etc. etc.
Is this possible?

Answer 1

I have kept your original design as a reference.
In the edited design, I have:
set the background size to twice the original size
changed the way to generate the triangles, this way you only need 2 elements instead of 3.
And added a non-0 position to the 3rd and 4th background images, to make them appear interleaved with the first 2
.test {
width: 100%;
height: 100px;
background:
linear-gradient(-120deg, transparent 63%, #fff 63%),
linear-gradient(120deg, transparent 63%, #fff 63%),
linear-gradient(to bottom, blue, blue);
background-size: 90px 50px;
background-repeat: repeat-x;
}
.test2 {
width: 100%;
height: 60px;
background-size: 180px 60px;
background-repeat: repeat-x;
background-image: linear-gradient(120deg, blue 26px, transparent 28px),
linear-gradient(-120deg, blue 26px, transparent 28px),
linear-gradient(120deg, red 26px, transparent 28px),
linear-gradient(-120deg, red 26px, transparent 28px);
background-position: 0px 0px, 0px 0px, 90px 0px, 90px 0px;
}
<div class="test"></div>
<div class="test2"></div>