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>

回答1:

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.

来源：https://stackoverflow.com/questions/36101349/css-rainbow-built-using-gradient-colors