交替三角形彩色背景

Question

我創建以下背景圖案：

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

我想能夠交替三角形的顏色，例如紅，藍，綠，紅，藍，綠，紅，藍綠等等。

Answer 1

我一直把你的原始設計作爲參考。

在編輯的設計，我有：

設置背景大小爲原始大小

兩次修改，以生成三角形的方式，這種方式只需要2個元素，而不是3

並增加了一個非0位置到第三和第四背景圖像，以使它們顯得與第一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>

交錯