如何用css畫三角形

在設計稿中，常常會出現好多三角形，若是將三角形變成圖片，經過img標籤的src或者background中的url來訪問，從前端性能方面來看這並很差。那問題來了，如何用css來畫三角形呢？彆着急，先來看看我所遇到過的三角形。以下圖，有實心三角形，空心的，還有能夠歸爲三角形的小箭頭。

先來講說實心的三角形。

畫一個三角形，首先想到的是如何畫三角形的形狀，而後給一個背景顏色。可是在寫div時，會發現，div是的邊框是直線。那麼，我想到，要是給div的高和寬設置爲0，而後設置四個border不一樣的顏色，那麼這個顏色會重疊覆蓋麼？ps：固然會想到設置padding或者margin值，可是這兩種屬性沒法設置顏色。

#triangle02{
    width: 0;
    height: 0;
    border-top: 50px solid blue;
    border-right: 50px solid red;
    border-bottom: 50px solid green;
    border-left: 50px solid yellow;
    }

由於咱們只想要一個三角形，若是把其餘三個三角形的顏色變白，那就只剩下一個，等等，若是背景顏色不是白色呢？css中有這樣一個屬性，transparent，背景透明。這樣即可以達到咱們的目的了。

#triangle03{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 50px solid blue;
    }
#triangle04{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-right: 50px solid red;
    }
#triangle05{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 50px solid green;
    }
#triangle06{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left: 50px solid yellow;
    }

上面的代碼就能夠實現，四個不一樣方向的三角形了。

設計稿中可能還會出現高和底長度有限制的三角形，這裏以第三個綠色三角形爲例。看上面的代碼，咱們能夠發現，三角形的底爲border的兩倍，border-bottom爲三角形的高。來看下面這組三角形：

#my01{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 50px solid green;
    }
#my02{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 80px solid green;
    }
#my03{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 100px solid green;
    }
#my04{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 150px solid green;
    }

#my11{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 100px solid green;
    }
#my12{
    width: 0;
    height: 0;
    border: 70px solid transparent;
    border-bottom: 100px solid green;
    }
#my13{
    width: 0;
    height: 0;
    border: 90px solid transparent;
    border-bottom: 100px solid green;
    }
#my14{
    width: 0;
    height: 0;
    border: 110px solid transparent;
    border-bottom: 100px solid green;
    }

夠詳細吧~

那個小箭頭的三角形，主要運用了css3的transform中的rotate()，咱們後續再介紹吧！