CSS Regenbogen gebaut mit Farbverlauf

Question

Ich habe das folgende Problem: Schreiben Sie eine Webseite, die darüber einen Regenbogen mit Farbverlauf gebaut hat. Der Regenbogen sollte mit einem Winkel geneigt sein (er sollte nicht perfekt horizontal sein) und die Breite des Regenbogens auf der linken Seite sollte kleiner als die Breite des Regenbogens auf der rechten Seite sein.

Ich weiß nicht, wie man das Teil mit der Breite macht. Kann mir jemand helfen?

#grad1 { 
 

 
    height: 200px; 
 

 
    background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet); 
 

 
}

<div id="grad1"></div>

Answer 1

Sie viele Hintergründe in der background Eigenschaft nutzen können und somit viele gradients. Hier ist ein hässlicher Regenbogen viele Steigungen mit:

#grad1 { 
 
    height: 200px; 
 
    background: linear-gradient(78deg, red 5%, transparent 7%), linear-gradient(69deg, orange 10%, transparent 12%), linear-gradient(60deg, yellow 15%, transparent 17%), linear-gradient(51deg, green 20%, transparent 22%), linear-gradient(43deg, blue 25%, transparent 27%), linear-gradient(35deg, indigo 30%, transparent 32%), linear-gradient(28deg, violet 35%, transparent 37%); 
 
}

<div id="grad1"></div>

Es ist nicht perfekt, aber es ist ein Anfang ... Fiddle um mit den Werten und Sie bekommen, was Sie wollen.