造树代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>盒子模型的趣味案例</title> <style> .box{ width: 600px; border: 1px solid black; /*外边距的特殊用法 ，将宽度小于父元素的元素放到父元素的中间*/ margin: 10px auto; } .top{ width: 0; height:0; border-bottom: 50px solid green; /*设置边框透明色*/ border-left: 50px solid transparent; border-right: 50px solid transparent; margin: auto; } .middle{ width: 0;height: 0; border-bottom: 100px solid green; border-left: 100px solid transparent; border-right: 100px solid transparent; margin: auto; } .bottom{ width: 0;height: 0; border-bottom: 150px solid green; border-left: 150px solid transparent; border-right: 150px solid transparent; margin: auto; } .tree{ width: 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自然称起了一个三角形
转载于:https://www.cnblogs.com/awei313558147/p/11180781.html
