html盒子模型的实例,有趣的CSS盒模型案例

盒模型：

Snip20161220_7.png

看效果：

Snip20161220_5.png

HTML代码：

Document

.div-border{

margin: 0px 0px 0px 80px;

padding: 0px;

width: 0px;

height: 0px;

border: 100px solid transparent;

border-bottom-color: green;

border-top: 0px;

}

.div-border2{

margin: 0px 0px 0px 40px;

padding: 0px;

width: 0px;

height: 0px;

border: 140px solid transparent;

border-bottom-color: green;

border-top: 0px;

}

.div-border3{

margin: 0px 0px 0px 0px;

padding: 0px;

width: 0px;

height: 0px;

border: 180px solid transparent;

border-bottom-color: green;

border-top: 0px;

}

.div-border4{

margin: 0px 0px 0px 160px;

padding: 0px;

width: 40px;

height: 140px;

background-color: black;

}