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

Question

我遇到以下问题：写一个网页，上面有一个使用渐变颜色构建的彩虹。彩虹要倾斜一定角度（不能完全水平），左边彩虹的宽度要小于右边彩虹的宽度。

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

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

它并不完美，但它是一个开始...Fiddle围绕价值观，你会得到你想要的。

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

css rainbow built using gradient colors

css

gradient

width