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