0

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: enter image description here

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" enter image description here

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?

petko_stankoski
  • 10,459
  • 41
  • 127
  • 231

1 Answers1

5

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>
Andrew Bone
  • 7,092
  • 2
  • 18
  • 33
  • Oh...I see what you did there. Clever. you might want to explain it though. – Paulie_D Sep 19 '17 at 10:42
  • @Paulie_D The explanation: First the `linear-gradient` is applied with a transparent first part (top left) and a white second part (bottom right). After that, the `repeating-linear-gradient` is applied behind that and will only be visible on the transparent part. Because the parts of `linear-gradient` are defined at 49% and 51%, the middle 2% will be rendered as a blurred middle section. – Robin Bastiaan Mar 24 '21 at 19:47