css3畫三角形的原理

以前用過css3畫過下拉菜單里文字后面的“下拉三角符號”，類似於下面這張圖片文字后面三角符號的效果

下面是一個很簡單的向上的三角形代碼 

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
}

再給相應的div加上對應的class，一個如下的三角形就用css畫好了

   

 

當時也嘗試去理解為什么三角形的代碼是要這樣去寫，但是沒有看明白。后來也就擱着不了了之了。這是之前一個偶然的機會我有接觸到了這個利用css3畫三角形的知識，於是就決定好好研究了一番其原理，經過一番嘗試，終於搞清楚了其內部的原理，其實很簡單，下面就開始說其原理。

先來看一下我們的預備知識

當我們設置一個div其width與height為100px，並且設置其四邊框的寬度為100px，且分別設置其顏色后，我們可以看到如下的一張圖片

 

 

此時如果設置這個div的height為0的話，其他不變，會得到下面這個圖形

 

 

下面把其寬度也設置為0后，得到如下的一張圖片

所以這就是我們把width，height設置為0后得到的效果，是不是出乎意料的竟然有點好看。。好了接下來看我們的正式講解

正式講解部分

當我們如下設置代碼並賦給div相應的屬性時

#sider2{
    width: 100px;
    height: 100px;
    border-top: 30px solid #000;
    border-right: 30px solid #ff0000;
    border-left: 30px solid #00ff00;
    border-bottom: 30px solid #0000ff;
}

會得到如下的一張圖

 

接着當不設置border-bottom，即默認其為0時，可以得到下面的圖片

 

 

然后當設置其width為0時，如下圖

 

繼續設置其height為0

 

最后假若你把border-left,border-right設置為透明之后，就可以看到如下的三角形了

 

 

這就是設置一個基本的三角形所需要的代碼，效果也看起來很直觀。按着上面的步驟分析一邊就可以很清楚的明白其原理。

還有假如你是想實現一個直角三角形，則最后你需要兩個border邊的配合使用，瀏覽器會自動進行一些“拉伸變換”后就可以得到一個直角三角形。

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}