Background in css with linear-gradient and repeating-linear-gradient

Question

I have a scheduler-like component on my web application which consists of a lot of divs. Some of these divs can be completely red, some can be completely white, some can be half-red half-white and some can be striped red-white.

The ones that are half-red half-white have this background in css:

background: linear-gradient(169deg, rgba(240,91,38,0.30) 49%, rgb(255, 255, 255) 51%);

And they look like this:

The ones that are striped have this css code:

background: repeating-linear-gradient(45deg, #ffd6cc, #ffd6cc 10px, #ffffff 10px, #ffffff 20px)

And they look like this"

I am stuck on what I should do next - I need to have cells that are combination of both of the above. So the div needs to be like in the first image, but instead of the whole upper triangle being colored red, the triangle should be striped. Is there a way to do this with css?

Answer 1

You can have multiple gradients per background

.half-cell {
  background: linear-gradient(162deg, rgba(255, 255, 255, 0.0) 49%, rgb(255, 255, 255) 51%), repeating-linear-gradient(45deg, #ffd6cc, #ffd6cc 10px, #ffffff 10px, #ffffff 20px);
}

div {
  width: 606px;
  height: 200px;
  border: 1px solid black;
}

<div class="half-cell"></div>