繰り返し勾配とブレンドモードを使用して矢印付き背景を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

いくつかの研究の後、私は解決策は、異なる背景をオーバーレイし、上部のいずれかの半分しか絶頂を使用することを発見しました。コンテナの高さが知られており、固定されている場合にのみ動作しますよう それはこの

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

のように見えるだろうそれでもこれはおそらく最善の解決策ではありません。