網頁中經常有一種三角形的圖標，鼠標點一下會彈出一個下拉菜單之類的
之前以爲是個png圖標背景，後來在bootstrap中看到有一個圖標樣式叫做caret的用來實現這種效果。沒想到用CSS也能實現這個效果。
看了下源碼是這樣的：
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}研究一番之後，發現原理是這樣的：
首先，需要把元素的寬度、高度設爲0。
然後設置邊框樣式。最關鍵的也在這裏。
這裏我們先做一個實驗，如果一個元素具有下列樣式：
{
width: 0;
height: 0;
border: 4px solid;
}效果是什麼？沒錯是個正方形：
因爲元素寬度、高度都爲0，只有4px的邊框，於是變成了上面的效果。
再來，我們把樣式改成下面這樣：
{
width: 0;
height: 0;
border-top: 40px solid #000;
border-right: 40px solid #ff0000;
border-left: 40px solid #ff0000;
border-bottom: 40px solid #000;
}這會是什麼效果呢？可能你不會想到：
這是爲什麼呢？我們打個比方，有四塊紅色和黑色的木板代表元素的四個邊框，把他們兩橫兩豎重疊起來，這時候他們在二維平面的投影便成了上面的效果。
說到這裏，大家該明白了上面的三角形圖標是怎麼來的了吧：元素沒有下邊框，而左右邊框又是透明的，相當於只有上圖中的上面的黑色三角形部分。
所以，如果我們要做倒立三角形、向右的、或者向左的三角形，只需要爲三角形底部設置邊框，兩腰邊框透明即可。
例如：
{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid #ff0000;
border-bottom: 40px solid transparent;
} 
另外，如果我們把樣式改成這樣：
{
width: 0;
height: 0;
border-top: 40px solid #000;
border-right: 30px solid #ff0000;
border-left: 50px solid #ff0000;
border-bottom: 25px solid #000;
}將得到如下效果：
