Alternating Dreieck Farbe Hintergrund lineare Gradienten in CSS3 mit

Question

ich die folgenden Hintergrundmuster erstellt habe:

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; 
} 

Ich mag würde in der Lage sein die abzuwechseln Farben der Dreiecke z rot, blau, grün, rot, blau, grün, rot, blau grün etc. etc.

Ist das möglich?

Answer 1

Ich habe Ihr ursprüngliches Design als Referenz behalten.

In der bearbeiteten Design, ich habe:

die Hintergrundgröße auf das Doppelte der ursprünglichen Größe eingestellt

den Weg, um die Dreiecke zu erzeugen, geändert, so müssen Sie nur zwei Elemente statt 3.

und hat eine nicht-0-Position der 3. und 4. Hintergrundbilder, sie erscheinen verschachtelt mit dem ersten 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>

zu machen