今天學習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繪制三角形的原理剖析