Hot to make gradient half red / half blue? - css

Question

Currently the whole thing is red.
How would I make this gradient, half the left side red, half blue?
That is all I am trying to do in the code.
div {
width: 640px;
height: 340px;
background:
linear-gradient(45deg,
transparent,
transparent 7px,
red 7px,
red 7.5px,
transparent 7.5px,
transparent 10px),
linear-gradient(-45deg,
transparent,
transparent 7px,
red 7px,
red 7.5px,
transparent 7.5px,
transparent 10px);
background-size: 10px 10px;
}
<div></div>

Answer 1

Use your gradient configuration inside mask then consider a regular background for your separation. I optimized you gradient configuration a little as well:
div {
width: 640px;
height: 340px;
background: linear-gradient(90deg, red 50%,blue 0);
-webkit-mask:
linear-gradient( 45deg, #0000 7px, #000 0 7.5px, #0000 0 10px),
linear-gradient(-45deg, #0000 7px, #000 0 7.5px, #0000 0 10px);
-webkit-mask-size: 10px 10px;
}
<div></div>

Answer 2

You could use repeating-linear-gradient, background-size, background-position , background-repeat and background-position all together. So you can lay on different areas differents sized gradients
Possible example:
div {
border:solid;
width: 640px;
aspect-ratio:3/1.5;
background:
repeating-linear-gradient( 45deg,transparent 0 7px,red 7px 8px,transparent 8px 10px) 0 0 / 50% 100% no-repeat,
repeating-linear-gradient(135deg,transparent 0 7px,red 7px 8px,transparent 8px 10px) 0 0 / 50% 100% no-repeat,
repeating-linear-gradient(225deg,transparent 0 7px,blue 7px 8px,transparent 8px 10px) 100% 0 / 50% 100% no-repeat,
repeating-linear-gradient(135deg,transparent 0 7px,blue 7px 8px,transparent 8px 10px) 100% 0px / 50% 100% no-repeat
ivory /* bgcolor */
}
<div></div>

Answer 3

On top of half of the block we place the layer in a pseudo-element with a css filter on the background. Filter properties are different. In our case, we apply a filter that rotates the hue palette backdrop-filter: hue-rotate(240deg) so that the red becomes blue. 240deg means rotate 240 degrees clockwise.
div {
width: 640px;
height: 340px;
background: linear-gradient(45deg, transparent, transparent 7px, red 7px, red 7.5px, transparent 7.5px, transparent 10px), linear-gradient(-45deg, transparent, transparent 7px, red 7px, red 7.5px, transparent 7.5px, transparent 10px);
background-size: 10px 10px;
position: relative;
}
div::after {
position: absolute;
left: 50%;
top: 0;
display: block;
width: 50%;
height: 100%;
content: '';
backdrop-filter: hue-rotate(240deg);
}
<div></div>