画三角形

画三角形相对比较简单，直接给宽高设置为0，使用transparent将边框设置透明色，再给下方盒子一个颜色


    .triangle{
      width: 0;
      height: 0;
      border: 150px solid transparent;
      border-bottom-color: salmon;
    }
   
  </style>
  
  <body>
  <div class="triangle"></div>
</body>

画扇形

使用transparent将边框设置透明色，给下方盒子一个颜色，再使用radius设置弧形

  <style>

  .sector{
    border: 200px solid transparent;
    border-radius: 200px;
    width: 0;
    border-bottom-color: aqua;
  }
  </style>
  
  
<body>
  <div class="sector"></div>
  
</body>

梯形

盒子四边各设置边框不同颜色即可；

<style>

    .trapezoid{
      width: 100px;
      height: 100px;
      border-top: 80px solid pink;
      border-right: 80px solid skyblue;
      border-left: 80px solid rebeccapurple;
      border-bottom: 80px solid red;
    }
 
  </style>
</head>
<body>
 
  <div class="trapezoid"></div>
 
</body>
</html>

圣诞树

这是一个简陋版的圣诞树，大家凑合着看吧，咱们只看怎么实现的就行。

<style>
#tree1{
    width: 0px;
    height: 0px;
    border: 100px solid transparent; 
    border-bottom: 100px solid green;
    float: left;
    margin-left: 100px;
}

#tree2{
    width: 0px;
    height: 0px; 
    border: 200px solid transparent; 
    border-bottom: 200px solid green;
   
}
#footer{
    width: 100px;
    height: 200px;
    background: gray;
    margin-left: 150px;
}
</style>
</head>
<body>
    <div id="tree1"></div>
    <div id="tree2"></div>  
    <div id="footer"></div>
</body>
</html>

使用css画三角形，扇形，梯形以及圣诞树

画三角形

画扇形

梯形

圣诞树