{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=utf-8>\n        <style type=\"text/css\">\n            .topbranch {\n                width: 0px;\n                height: 0px;\n                /*\n                * TODO: 上枝叶效果\n                */\n                float:left;\n                border-bottom:100px solid green;\n                border-top:100px solid transparent;\n                border-left:100px solid transparent;\n                border-right:100px solid transparent;\n                margin-left:100px;\n            }\n            .middleBranch {\n                width: 0px;\n                height: 0px;\n                /*\n                * TODO: 中枝叶效果\n                */\n                border-top:200px solid transparent;\n                border-bottom:200px solid green;\n                border-left:200px solid transparent;\n                border-right:200px solid transparent;\n            } \n            \n            .base {\n                /*\n                * TODO: 树干效果\n                */\n                width:70px;\n                height:200px;\n                background:gray;\n                float:left;\n                margin-left:165px;\n                \n            }\n        </style>\n    </head>\n    <body>\n    \t<section class=\"topbranch\"></section>\n        <section class=\"middleBranch\"></section>\n        <section class=\"base\"></section>\n    </body>\n</html>","libs":[]}

利用树顶的浮动,使他脱离文档流,达到树中和树顶的靠拢;

设置实体边框,除下边框其他均设置透明做成下三角形;