CSS繪製三角形的原理剖析

標籤：demo   bsp   blog   idt   blank   fill   lan   ref   .net   

今天學習Bootstrap時候，看到按鈕的向下三角形源碼：

 1 .caret {   2   display: inline-block;   3   width: 0;   4   height: 0;   5   margin-left: 2px;   6   vertical-align: middle;   7   border-top: 4px solid;   8   border-right: 4px solid transparent;   9   border-left: 4px solid transparent;  10 }  

我對border應用的原理不解，所以準備探索一下。我一直以邊框是矩形的，如下代碼

 

.border {    width:50px;    height:50px;    border: 2px solid;    border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;    }

 

當我們增大border的值時

 

.border {    width:50px;    height:50px;    border: 20px solid;    border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;  } 

　　

 

從可以很明顯的發現每一邊的邊框是梯形。

 

現在試想一下，我們把元素的長和寬都設定為0px,邊框的值不變，我們用極限的原理解釋，每一邊的邊框將會由梯形變成三角形，下面我們用代碼來實驗一下。

 

.border {    width:0px;    height:0px;    border: 20px solid;    border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;  }  

　　

果然不出所料，我們得到如下結果：

 

 

那麼現在我們對如何繪製三角形就有一個思路：把其他三邊的邊框的border-color值設為transparent，即可得到一個三角形。比如

 

.border {    width:0px;    height:0px;    border: 20px solid;    border-color: #ADFF2F transparent transparent transparent;  }  

　　

 

 

我們再回過頭來看Bootstrap中.caret的源碼。似乎和我們想象中的不一樣，在設計向下三角形時，開發人員只設定了左上右的邊框值，然後將左右兩邊的邊框的border-color設定為transparent。我們現在先把左右兩邊的border-color不設定為transparent，看看是怎麼樣的圖形。

 

1 .border {  2   width: 0;   3   height:0;  4   border-top: 40px solid #ADFF2F;  5   border-right: 40px solid #BA55D3;  6   border-left: 40px solid #FF0000;  7 } 

原來當不設定下邊框時，左右的邊框會把下半部分切掉。到這裡我們應該能完全理解bootstrap的.caret代碼的原理了。

 

但是我們的探索並沒有到此就結束，我們帶著好奇心，測試如下代碼：

 

1 .border {  2   width: 0;   3   height:0;  4   border-top: 40px solid #ADFF2F;  5   border-right: 40px solid #BA55D3;  6 } 

我們只設定上右的邊框，得到如下結果：

 

似乎有點難以理解，如果我們測試如下代碼，應該會恍然大悟。

 

1 .border {  2   width: 40px;   3   height:40px;  4   border-top: 40px solid #ADFF2F;  5   border-right: 40px solid #BA55D3;  6 } 

 

原來上面那一個例子顯示成一個正方形，是因為元素的高和寬都為0，從而導致border收縮為右上方那一部分。

 

最有我們來看看，如果只設定元素對邊的兩條邊框，看看會出現什麼情況。

 

1 .border {  2   width: 0;   3   height:0;  4   border-top: 40px solid #ADFF2F;  5   border-bottom: 40px solid #FF0000;  6 }  

 

瀏覽器什麼也不顯示，分析其原因：因為元素的高和寬都為0，而且對邊的兩條邊框沒有交集，所以必然收縮為0.

最後我們來看一個應用的例子：

 

 1 <span style="white-space:pre">        </span>#demo {   2             width: 200px;   3             line-height: 100px;   4             background-color: #fff;   5             position: relative;   6             border: 1px solid #5BBF5A;   7             text-align: center;   8             font-size: 25px;   9         }  10   11         #demo:after, #demo:before {  12             border: solid transparent;  13             content: ‘ ‘;  14             width: 0;  15             height:  0;  16             position: absolute;  17         }  18   19         #demo:after {  20             border-width: 10px;  21             border-top-color: #fff;  22             top: 100px;  23             left: 150px;  24         }  25   26         #demo:before {  27             border-width: 11px;  28             border-top-color: #5BBF5A;  29             top: 100px;  30             left: 149px;  31         }  32  

 

 

效果如下：

它實現的原理很簡單，就是兩個三角形的疊加。

CSS繪製三角形的原理剖析