Blend diagonal linear gradients - css

Question

I have created this pattern, consisting of blue and red lines. But I can't find a way to blend the red and the blue lines (to something like dark purple if I'm correct) where they cross each-other (see third case). Any ideas? Using transparency doesn't help as I only want it where they cross.
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

You have one posibility, without changing much your current approach.
Just set the red stripes twice, the first without transparency. On top, set the blue stripes, and on top set againg the red ones, now with alpha:
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>
Another posibility, as posted by Abhitalks, is to use blend mode (with limited browser support). But you need to set it on a pseudo element to avoid blending it with the solid background:
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

You can experiment with the new background-blend-mode, which is currently in editor's draft for Compositing and blending Level 1.
References: background-blend-mode and mix-blend-mode.
Be advised though, that this is currently not supported by IE, Edge and Opera, with partial support in Safari. That leaves only Chrome and Firefox :(
Example Snippet:
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;
background-blend-mode: color, hard-light;
}
<div class="caro-pattern3">3</div>