[面试题目]如何用三个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;

}