Hintergrund in CSS mit linear-gradient und repeating-linear-gradient

Question

Ich habe eine scheduler-ähnliche Komponente auf meiner Web-Anwendung, die aus einer Menge divs besteht. Einige dieser Divs können komplett rot sein, einige können komplett weiß sein, einige können halb rot, halb weiß und andere rot-weiß gestreift sein.

Diejenigen, die halb rot halb weiß sind, haben diesen Hintergrund in CSS:

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

Und sie sehen wie folgt aus:

diejenigen, die diese CSS-Code haben gestreift werden:

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

Und sie schauen, wie dieses“

Ich bin fest, was ich als nächstes tun sollte - ich brauche Zellen, die eine Kombination aus beiden der oben genannten sind. Also muss das div wie im ersten Bild sein, aber anstatt dass das gesamte obere Dreieck rot gefärbt ist, sollte das Dreieck gestreift sein. Gibt es eine Möglichkeit, dies mit CSS zu tun?

Answer 1

können Sie mehrere Steigungen pro

Hintergrund haben

.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>