網頁中經常有一種三角形的圖標，鼠標點一下會彈出一個下拉菜單之類的（之前淘寶也有，不過現在改版好像沒有了）
之前以為是個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; }
