使用渐变颜色构建的CSS彩虹 [英] css rainbow built using gradient colors

问题描述

我有以下问题: 编写一个网页，该网页的顶部是使用渐变颜色构建的彩虹.彩虹应倾斜一定角度(不应完全水平)，并且左侧的彩虹宽度应小于右侧的彩虹宽度.

I have the following problem: Write a web page which has on top of it a rainbow built using gradient colors. The rainbow should be tilted with an angle (it should not be perfectly horizontal) and the width of the rainbow on the left side should be smaller than the width of the rainbow on the right side.

我不知道该怎么做宽度的部分.谁能帮我吗?

I don't know how to do the part with the width. Can anyone help me?

#grad1 {

  height: 200px;

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

}

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

推荐答案

您可以在background属性中使用许多背景，因此可以使用许多gradients.这是一条使用多种渐变的丑陋彩虹:

You can use many backgrounds in the background property, and thus, many gradients. Here is an ugly rainbow using many 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>

这不是完美的，但这是一个开始...随便摆弄值，您将得到想要的东西.

It is not perfect, but it is a start... Fiddle around with the values and you will get what you want.

这篇关于使用渐变颜色构建的CSS彩虹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！