cssグラデーションカラーを使って虹を作成

Question

私は以下の問題があります： グラデーションカラーを使用して作成された虹を上に持つWebページを作成します。虹はある角度（完全に水平であってはならない）で傾け、左側の虹の幅は右側の虹の幅より小さくなければなりません。

私は幅で部品を行う方法がわかりません。誰でも助けてくれますか？

#grad1 { 
 

 
    height: 200px; 
 

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

 
}

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

Answer 1

あなたはbackgroundプロパティに多くの背景を使用し、これにより、多くのgradientsことができます。ここでは多くの勾配を使用して醜い虹である：それは完璧ではありません

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

は、それは...周りの値をいじると、あなたが望む結果を得るでしょうスタートです。