Issue
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>
Solution
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>
Answered By - Temani Afif
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.