使用HTML+CSS画圣诞树

首先，我们来看看圣诞树长啥样？
          
我们当然，不能画的如此漂亮，但是可以实现这个树的形状，分析这个树，我们首先有个三角形，然后是两个四边形，然后是一个长方形的树干，这样就能绘制出圣诞树的形状了。
先看看，如何绘制三角形 ，与四边形。
          三角形：
                       <div class="triangle"></div>
                       .triangle{
                            width: 0px;  
                           height: 0px;  
                          border-width: 80px;
                           border-color:transparent transparent green;
                           border-style: solid;
                       }
          注： 将宽与高设置为0，设置边框的宽度，及样式的样式，最后将上，左，右边的边框，设置成透明色，这样我们就可以得到想到的三角形。
         如图：  

             四边形：
                       与三角形设置类似，不同的是，需要设置div的宽度，我们需要一个小的四边形与一个大的四边形，改变宽度的大小即可：
                         <div class="fourangle"></div>
                         <div class="fourangle2"></div>          
                          .fourangle{
                                     width: 70px;  
                                    height: 0px;  
                                    border-width: 80px;
                                     border-color:transparent transparent green;
                                     border-style: solid;
                             }
                             .fourangle2{
                                     width: 100px;  
                                    height: 0px;  
                                    border-width: 80px;
                                     border-color:transparent transparent green;
                                     border-style: solid;
                             }
                效果如图：
                    
                然后是树干：
                        比较简单，设置宽，高再设置个背景色即可。
                      <div class="tree"></div>
                      .tree{
                            width:20px;
                            height: 60px;
                             background-color: brown;
                          }
                效果如图：
                    
           通过，以上的代码，可以已经有了圣诞树所需要的图形，下面，我们就需要将它们位置，进行设置。这就需要用到定位元素的知识。我们选取，相对定位，来设置元素的位置。
            将div全部设置成相对定位：
              div{
                    position: relative;
                 }
              在对上面的图片进行移动：
               .triangle{
                           left:50px;
                           width: 0px;  
                           height: 0px;  
                           border-width: 80px;
                           border-color:transparent transparent  green;
                           border-style: solid;
                   }
            .fourangle{
                          top:-80px;
                          left:20px;
                           width: 70px;  
                           height: 0px;  
                           border-width: 80px;
                           border-color:transparent transparent green;
                           border-style: solid;
                   }
          .fourangle2{
            top:-160px;
            left:10px;
            width: 100px;  
            height: 0px;  
            border-width: 80px;
            border-color:transparent transparent green;
            border-style: solid;
    }
         .tree{
                 top:-160px;
                left:120px;
                width:20px;
                height: 60px;
                background-color: brown;
    }
      HTML：代码如下：
           <div class="triangle"></div>
            <div class="fourangle"></div>
            <div class="fourangle2"></div>
            <div class="tree"></div>
     最后，我们的圣诞树就诞生了
      效果如图：