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

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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>