Pure CSS Rainbow in a Single Div

Hello!
Today I’ve had a bit of fun with CSS creating a little rainbow using only CSS, and placing it in a single div.

<div class="rainbow"></div>This is all there is from the markup point of view. All the magic happens in CSS using the property box-shadow.
box-shadow:
0 0 0 10px #ff0000,
0 0 0 20px #ff7700,
0 0 0 30px #FFDD00,
0 0 0 40px #00FF00,
0 0 0 50px #0000FF,
0 0 0 60px #C77DF3,
0 0 0 70px #8A2BE2;The specs of the box-shadow property are (W3C source):
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;which means that vertical shadow, horizontal shadow and blur will be zeroed, the only properties populated are spread and color which make the line solid. The dimensions are progressive in order to show the shadows one after another. This means that the violet shadow, the last one, will be large 70px but only the last 10px will be visible.
The div has a width of 200px and a height of 100px and is rotated by -90deg. It also has 50px of border-radius. The visible part is actually the corners of a rounded rectangle.
To make it look like an arch, I’ll admit that I’ve cheated a bit. I used the :before pseudo element to create an absolutely positioned rectangle, coloured white — same colour of the background, so that it looks like the rainbow is just an arch.
Here’s the embedded Codepen. Let me know if you have suggestions or questions.
Bye!
