用css畫三角形或者梯形等圖片主要是利用css中的border屬性

1. 正方形 ==>為一個div設(shè)置如下樣式

   .tri {
     width: 0px;
     height: 0px;
     border-top: 100px solid aqua;
     border-right: 100px solid skyblue;
     border-bottom: 100px solid aqua;
     border-left: 100px solid skyblue;
   }
   

正方形

2. 三角形===>將其余三個邊框的顏色設(shè)為transparent 即可

   
   
   三角形

3.改變div的寬高和border屬性得到不一樣的圖形

    .tri {
      width: 0px;
      height: 0px;
      border-top: 0px;
      border-right: 100px solid skyblue;
      border-bottom: 100px solid aqua;
      border-left: 200px solid skyblue;
    }

變形

4.梯形

    .tri {
      width: 100px;
      height: 0px;
      border-top: 0px;
      border-right: 50px solid transparent;
      border-bottom: 200px solid aqua;
      border-left: 50px solid transparent;
    }

梯形

5.隨機(jī)變形

    .tri {
      width: 100px;
      height: 100px;
      border-top: 50px solid transparent;
      border-right: 50px solid skyblue;
      border-bottom: 50px solid aqua;
      border-left: 50px solid transparent;
    }

隨機(jī)形狀

6.還可以用兩個或者多個div拼接成更多的圖形，繼續(xù)發(fā)揮想象吧~