斜め線のグラデーションを斜め​​に合成する

Question

青と赤の線で構成されるこのパターンを作成しました。しかし、赤と青の線を（私が正しいとすればダーク・パープルのようなものに）混ぜる方法は見つけられません。何か案は？透明性を使用することは、私が交差する場所でのみ必要なので、役に立たない。

div{ 
 
    width:50px; height:100px; 
 
    border: solid 2px black; 
 
    float:left; 
 
    margin:10px; 
 
    font-size:30px; 
 
    font-weight:bold; 
 
} 
 

 
.caro-pattern1 { 
 
    background-color:#2ECC40; 
 
    background-image: linear-gradient(-45deg, blue 5%, transparent 5%, transparent 45%, blue 45%, blue 55%, transparent 55%, transparent 95%, blue 95%); 
 
    background-size:50px 50px; 
 
} 
 
.caro-pattern2 { 
 
    background-color:#2ECC40; 
 
    background-image: 
 
    linear-gradient(45deg, red 5%, transparent 5%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 95%, red 95%); 
 
    background-size:50px 50px; 
 
} 
 
.caro-pattern3 { 
 
    background-color:#2ECC40; 
 
    background-image: 
 
    linear-gradient(45deg, red 5%, transparent 5%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 95%, red 95%), 
 
    linear-gradient(-45deg, blue 5%, transparent 5%, transparent 45%, blue 45%, blue 55%, transparent 55%, transparent 95%, blue 95%); 
 
    background-size:50px 50px; 
 
}

<div class="caro-pattern1">1</div> 
 
<div class="caro-pattern2">2</div> 
 
<div class="caro-pattern3">3</div>

Answer 1

だけ赤を設定

：それはChromeとFirefoxの:(

例スニペットを残します。ストライプは2回、最初は透明ではありません。上に、青いストライプを設定し、上に赤色のストライプを設定します。アルファ：

div { 
 
    width: 50px; 
 
    height: 100px; 
 
    border: solid 2px black; 
 
    float: left; 
 
    margin: 10px; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
} 
 

 
.caro-pattern3 { 
 
    background-color: #2ECC40; 
 
    background-image: 
 
    linear-gradient(45deg, rgba(255, 0, 0, .5) 5%, transparent 5%, transparent 45%, rgba(255, 0, 0, .5) 45%, rgba(255, 0, 0, .5) 55%, transparent 55%, transparent 95%, rgba(255, 0, 0, .5) 95%), 
 
    linear-gradient(-45deg, blue 5%, transparent 5%, transparent 45%, blue 45%, blue 55%, transparent 55%, transparent 95%, blue 95%), 
 
    linear-gradient(45deg, red 5%, transparent 5%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 95%, red 95%); 
 
    background-size: 50px 50px; 
 
}

<div class="caro-pattern3">3</div>

もう働かは、Abhitalksによって投稿として、（限定されたブラウザのサポートで）ブレンドモードを使用することです。しかし、あなたは単色の背景とブレンド避けるために、擬似要素でそれを設定する必要があります。

div { 
 
    width: 50px; 
 
    height: 100px; 
 
    border: solid 2px black; 
 
    float: left; 
 
    margin: 10px; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
} 
 

 
.caro-pattern3 { 
 
    background-color: #2ECC40; 
 
    position: relative; 
 
} 
 

 
.caro-pattern3:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-image: 
 
    linear-gradient(-45deg, blue 5%, transparent 5%, transparent 45%, blue 45%, blue 55%, transparent 55%, transparent 95%, blue 95%), 
 
    linear-gradient(45deg, red 5%, transparent 5%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 95%, red 95%); 
 
    background-size: 50px 50px; 
 
    background-blend-mode: screen; 
 
}

<div class="caro-pattern3">3</div>

Answer 2

あなたはCompositing and blending Level 1用エディタのドラフトで、現在ある、新しいbackground-blend-modeを試すことができます。

参考文献：background-blend-modeおよびmix-blend-mode。

これは現在IE, Edge and Opera, with partial support in Safariでサポートされていません。あなたはずっとあなたの現在のアプローチを変更せずに、1働かを持って

div { 
 
    width: 50px; height: 100px; 
 
    border: solid 2px black; 
 
    margin: 10px; 
 
} 
 

 
.caro-pattern3 { 
 
    background-color: #2ECC40; 
 
    background-image: 
 
    linear-gradient(45deg, red 5%, transparent 5%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 95%, red 95%), 
 
    linear-gradient(-45deg, blue 5%, transparent 5%, transparent 45%, blue 45%, blue 55%, transparent 55%, transparent 95%, blue 95%); 
 
    background-size: 50px 50px; 
 
\t background-blend-mode: color, hard-light; 
 
}

<div class="caro-pattern3">3</div>