使用渐变颜色构建的 css 彩虹

Question

我有以下问题:写一个网页，上面有一个使用渐变颜色构建的彩虹。彩虹应倾斜一定 Angular (不应完全水平)，左侧彩虹的宽度应小于右侧彩虹的宽度。

我不知道如何做宽度的部分。谁能帮帮我？

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

它并不完美，但它是一个开始......摆弄这些值，你会得到你想要的。