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

跟楼上一样的，只不过我写的margin-bottom，这就是题目说的margin塌陷

.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;
}

Answer 2

大家就不考虑一下“彩虹”是弯的么？

.box1 {
        width: 400px;
        height: 200px;
        overflow: hidden;
    }
    .box1::before {
        float: left;
        display: block;
        width: 400px;
        height: 400px;
        border-radius: 100%;
        box-sizing: border-box;
        border: solid 10px blue;
        content: " ";
    }
    .box1::after {
        margin-top: 10px;
        margin-left: 10px;
        display: block;
        width: 380px;
        height: 380px;
        border-radius: 100%;
        box-sizing: border-box;
        border: solid 10px yellow;
        content: " ";
    }
    .box2 {
        float: left;
        margin-top: -180px;
        margin-left: 20px;
        width: 360px;
        height: 180px;
        overflow: hidden;
    }
    .box2::before {
        float: left;
        margin: 0;
        display: block;
        width: 360px;
        height: 360px;
        border-radius: 100%;
        box-sizing: border-box;
        border: solid 10px red;
        content: " ";
    }
    .box2::after {
        margin-top: 10px;
        margin-left: 10px;
        display: block;
        width: 340px;
        height: 340px;
        border-radius: 100%;
        box-sizing: border-box;
        border: solid 10px yellow;
        content: " ";
    }
    .box3 {
        float: left;
        margin-top: -160px;
        margin-left: 40px;
        width: 320px;
        height: 160px;
        overflow: hidden;
    }
    .box3::before {
        float: left;
        margin: 0;
        display: block;
        width: 320px;
        height: 320px;
        border-radius: 100%;
        box-sizing: border-box;
        border: solid 10px blue;
        content: " ";
    }

BTW： 因为问题里说到用margin做效果，我个人更喜欢用position..

Answer 3

一个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 4

.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;

}

Answer 5

我觉得一个div就够了。。你可以用box-shadow啊

.box1 {
    box-shadow: 0 20px 0 red,0 40px 0 yellow,0 60px 0 green,0 80px 0 blue;
    width: 200px;
    height:40px;
}

当然如果只支持firefox的话，我觉得multi-border-colors也是可以用的

Answer 6

这个题目确实是考察BFC相关知识的
大家使用各种方式实现这个代码,其实也主要是因为题目的不严谨
三个div,不用伪元素,不定高,兼容各浏览器

.blue{overflow:hidden;background: blue}
.yellow{overflow:hidden;margin:30px 0;background: yellow;}
.red{margin:30px 0;min-height:30px;background: red;}
<div class="blue">
    <div class="yellow">
        <div class="red"></div>
    </div>
</div>

Answer 7

用border-top
border-bottom

Answer 8

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

.box2 {
    margin:40px 20px;
}

.box1{
    padding:80px 0px;
    background:blue;
}

.box2{
    position:absolute;
    top:20px;
    padding:40px 0px;
    background:yellow;
}

.box3{
    position:absolute;
    top:80px;
    background:red;
}

不知道塌陷怎么搞

Answer 9

body｛

  background-color:yellow;

｝
.box1,.box3｛

  background-color:blue;

｝
.box2｛

   background-color:red;

｝
垂直方向的div，相邻margin会塌陷，取最大值，所以中间两个间距是40px，不是60px

Answer 10

.box1, .box2, .box3 {

width: 200px;

}
.box1{

background-color: blue;
height: 200px;

}

.box2 {

height: 120px;
background-color: red;
margin-top: -160px;

}
.box3{

height: 40px;
background-color: yellow;
margin-top: -80px;

}

Answer 11

<!-- 方法一 -->

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

div{
    width: 200px;
}
.div1{
    height: 250px;
    background: blue;
}
.div2{
    height: 150px;
    margin-top: -200px;
    background: yellow;
}
.div3{
    height: 50px;
    margin-top: -100px;
    background: red;
}

<!-- 方法二 -->

<div class="div1">
    <div class="div2">
        <div class="div3"></div>
    </div>
</div>

div{
    width: 200px;
    overflow: hidden;
}
.div1{
    height: 250px;
    background: blue;
}
.div2{
    height: 150px;
    margin-top: 50px;
    background: yellow;
}
.div3{
    height: 50px;
    margin-top: 50px;
    background: red;
}

Answer 12

.box1,.box2,.box3{

        width: 100%;
    }
    .box1 {
        height: 200px;
        background-color: blue;
    }
    .box2 {
        height: 120px;
        margin-top: -160px;
        background-color: yellow;
    }
    .box3 {
        height: 40px;
        margin-top: -80px;
        background-color: red;
    }

Answer 13

如果只是考虑某一段彩虹，我喜欢用border

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

.box1{
    border-top: solid 40px red;
    background-color: orange;
    border-bottom: solid 40px yellow;
}

.box2{
    border-top: solid 40px green;
    background-color: blue;
    border-bottom: solid 40px #000088;
}

.box3{
    background-color: violet;
}

Answer 14

.box1, .box2, .box3 {
    width: 200px;
    height: 40px;
    border: 1px solid purple;
}
.box1, .box3{
    margin: 20px;
}
.box1 {
    height: 200px;
    margin-bottom: -200px;
    background: blue;
}
.box2 {
    margin: 40px 20px;
    background: yellow;
    height: 120px;
    margin-bottom: -100px;
}
.box3 {
    background: red;
}

Answer 15

看了评论好多人写了嘛···我用的margin-top而已
.box1{margin-bottom: 0px;height: 200px;}
.box2{margin-top:-160px;margin-bottom: 0px;height: 120px;}
.box3{margin-top:-80px;}

Answer 16

三个DIV，每个俩伪类:before、:after，加起来六个，最后一个用投影做了；
其实使用box-shadow,一个DIV就可以实现7色咯～

Answer 17

css3 的多重边框。
border-width:6px;
border-style:solid;
border-top-colors:#000 #fff #999 #aaa #ccc #eee;
border-right-colors:#000 #fff #999 #aaa #ccc #eee;
border-bottom-colors:#000 #fff #999 #aaa #ccc #eee;
border-left-colors:#000 #fff #999 #aaa #ccc #eee;

Answer 18

你们都太牛了，真是高山仰止啊！

Answer 19

其实我觉得如果是楼主那种效果，一个margin-bottom的负值都可以解决了，如果要搞出个弯弯的彩虹那得用border-radius，几个DIV一重叠就行了，不过看上面有用radius-gradient的这个还真没想到，是个简单方法，不过不合题意，哈哈哈

Answer 20

ssssss