造树代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型的趣味案例</title>
<style>
.box{
600px;
border: 1px solid black;
/*外边距的特殊用法 ，将宽度小于父元素的元素放到父元素的中间*/
margin: 10px auto;
}
.top{
0;
height:0;
border-bottom: 50px solid green;
/*设置边框透明色*/
border-left: 50px solid transparent;
border-right: 50px solid transparent;
margin: auto;
}
.middle{
0;height: 0;
border-bottom: 100px solid green;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
margin: auto;
}
.bottom{
0;height: 0;
border-bottom: 150px solid green;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
margin: auto;
}
.tree{
50px;
height: 300px;
background-color: green;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"> </div>
<div class="tree"></div>
</div>
</body>
</html>
分析：
一个盒子，宽度高度都为0，设置另外三边的边框，name自然称起了一个三角形