<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
      .topbranch {
        float: left;
        width: 0px;
        height: 0px;
        /*
                * TODO: 上枝叶效果
                */
        border: 100px solid;
        border-color: transparent transparent green transparent;
        margin-left: 100px;
      }
      .middleBranch {
        width: 0px;
        height: 0px;
        /*
                * TODO: 中枝叶效果
                */
        border: 200px solid;
        border-color: transparent transparent green 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>