使用重複漸變和混合模式創建帶CSS的箭頭背景

Question

我想過用箭頭創建背景。一些看起來就像這個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; 
} 

在給定的例子有兩個元素，但在一起，使它看起來像我想它。如果我只是漸變，我只是得到小條。我嘗試了很多，但我無法弄清楚如何創建箭頭。多梯度背景混合模式。

我不確定這是否可能。但我正在尋找一種無外部背景圖像的解決方案。如果不可能，一個好的解釋爲什麼會很好。

Answer 1

這是我的。它看起來像一個箭頭，可以使用JavaScript重複。我無法用純CSS做到這一點。也許這個解決方案爲您提供了一個代碼的想法。

.top { 
 
    height: 5em; 
 
    width:80px; 
 
    margin-left:120px; 
 
    background: 
 
    repeating-linear-gradient(
 
\t \t 45deg, 
 
\t \t white, 
 
\t \t white 25%, 
 
\t \t gray 0, 
 
\t \t gray 50% 
 
\t); 
 
    background-size: 5em 5em; 
 
} 
 
.bottom { 
 
    height: 5em; 
 
    width:80px; 
 
    margin-left:120px; 
 
    background: 
 
    repeating-linear-gradient(
 
\t \t 135deg, 
 
\t \t white, 
 
\t \t white 25%, 
 
\t \t gray 0, 
 
\t \t gray 50% 
 
\t); 
 
    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

一些研究，我發現後，該解決方案是覆蓋不同的背景，只使用一半HIGHT爲上一個。 它會看起來像這樣

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

不過這也許不是最好的解決方案，因爲它只有在容器的高度是已知的和固定的工作。