Erstelle einen sich überschneidenden linearen Gradienten

Question

Ich weiß, dass ich einen linearen Gradienten als Hintergrund eines div Elements machen kann. Aber ist es möglich, sich überschneidende Liniengradienten zu machen? Siehe Bild unten:

Answer 1

Ja, es ist sehr gut möglich, solche Muster mit zwei linear-gradient Bildern zu erstellen. Wenn einem Element mehrere Hintergrundbilder zugewiesen sind, werden sie standardmäßig als Ebenen festgelegt, wobei der erste von rechts die unterste Ebene und der letzte von rechts die oberste Ebene darstellt.

Unten ist ein Beispielausschnitt für beide Muster.

(. Hinweis: In der abgewinkelten Musterlinie, ich die Farbhaltepunkte festgelegt habe unterschiedlich gezackte Linien zu vermeiden Die abgewinkelten linearen Gradienten immer dazu neigen, sie zu produzieren.)

div { 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
    border: 1px solid; 
 
} 
 
.checkered { 
 
    background: linear-gradient(to right, black 1px, transparent 1px), linear-gradient(to bottom, black 1px, transparent 1px); 
 
    background-size: 10px 10px; 
 
    background-position: 5px 0px, 0px 5px; 
 
} 
 
.angled { 
 
    background: linear-gradient(45deg, transparent 7px, black 7px, transparent 8px), linear-gradient(315deg, transparent 7px, black 7px, transparent 8px); 
 
    background-size: 10px 10px; 
 
}

<div class='checkered'></div> 
 

 
<div class='angled'></div>

Answer 2

Nicht sicher, ob dies ist, was Sie nach:

HTML

<div id="red2blue"></div> 
<div id="blue2red"></div> 

CSS

div{ 
    width:100px; 
    height:100px; 
    opacity: 0.5; 
    position:absolute; 
    top:0; 
    left:0; 
} 
#red2blue{ 
    background: linear-gradient(45deg, red, blue); 
} 

#blue2red{ 
    background: linear-gradient(-45deg, blue, red); 
} 

https://jsfiddle.net/9na275fn/