请尽可能用最少的div实现下图的布局：
5个div
实现原理：5个div全部position定位实现。
.red,.green,.blue,.yellow,.black {
position:absolute;
}
.red {
top:0;
left:0;
width:100px;
height:200px;
background-color:red;
}
.yellow {
top:0;
left:100px;
width:200px;
height:100px;
background-color:yellow;
}
.... //其他色类似
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="yellow"></div>
<div class="black"></div>
4个div
实现原理：4个div实现红绿蓝黄四色，黑色用background-color实现。
body {
background-color:black;
}
.red,.green,.blue,.yellow {
position:absolute;
}
.red {
top:0;
left:0;
width:100px;
height:200px;
background-color:red;
}
.yellow {
top:0;
left:100px;
width:200px;
height:100px;
background-color:yellow;
}
.... //其他色类似
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="yellow"></div>
3个div
实现原理：均分色块，利用border属性来进行多色区划分。
.top {
width:200px;
height:100px;
background-color:yellow;
border-left:100px solid red;
}
.middle {
width:100px;
height:100px;
background-color:black;
border-left:100px solid red;
border-right:100px solid green;
}
.bottom {
width:200px;
height:100px;
background-color:blue;
border-right:100px solid green;
}
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
1个div
实现原理：同3个div的思路，利用css的伪类before和after来处理。
.box {
width:100px;
height:100px;
background-color:black;
border-left:100px solid red;
border-right:100px solid green;
margin-top:100px;
}
.box:before {
content:'';
display:block;
width:200px;
height:100px;
background-color:yellow;
border-left:100px solid red;
position:absolute;
top:0px;
left:0px;
}
.box:after {
content:'';
display:block;
width:200px;
height:100px;
background-color:blue;
border-right:100px solid green;
position:absolute;
top:200px;
left:0px;
}
<div class="box"></div>
