[面试题目]如何用三个Div实现彩虹效果？

Question

面试中有个有趣的题目~
HTML code:

<div class="box1"></div><div class="box2"></div><div class="box3"></div>

CSS:

.box1, .box2, .box3 {    width: 200px;    height:40px;
}
.box1, .box3{    margin: 20px;
}
.box2 {    margin:40px 20px;
}

要求，基于这三个Div，添加CSS，做出一列有5个Div的效果，并且背景色依次为蓝色，黄色，红色，黄色，蓝色。
提示：利用css maring塌陷效果

我是用:before, :after添加Div做的。但是，感觉好像不是正确答案，虽然效果一样。
demo：http://jsfiddle.net/etianqq/ocdv1xrh/点击预览

不知道是否有更优的解法？？？尤其是提示，“利用css maring塌陷效果”。虽然明白塌陷的概念，但是如何利用，就不得而知了。

Answer 1

一个div就够，用CSS3径向渐变。div{        width: 200px;        height: 100px;        background: -webkit-radial-gradient(50% 100%,blue 0px, blue 20px, red 20px, red 40px, yellow 40px, yellow 60px, green 60px, green 80px, blue 80px, blue 100px,#fff 100px);        border-radius: 100% 100% 0 0;    }

Answer 2

.box1, .box2, .box3 {    width: 200px;}.box1 {    background: green;    height: 200px;    margin-bottom: -160px;}.box2 {    background: yellow;    height: 120px;    margin-bottom: -80px;}.box3 {    background: red;    height: 40px;}