劍走偏鋒——用css製作一個三角形箭頭

　　通常，我們做那個三角形，一般都是做張圖，而且需要兩張，因為一般都是下拉式功能表的效果，需要有個hover的樣式，箭頭是反的。那是不是有更好的辦法呢，畢竟要用兩張圖片來解決這麼一個小問題太浪費資源了，於是，下面我要用一個劍走偏鋒的方法來解決這一問題，用到的只需css的一個屬性，就是border-width

　　我們先來看個樣式，如果設定元素邊框，會怎麼樣：

test

　　似乎看不出什麼，讓我給四個邊框加上不同的顏色吧再看看吧：

test

　　是不是發現了些什嗎？對，讓我們把中間的文字去掉吧：

 

　　這樣，就出現4個三角形了，然後我們如果需要頂部那個三角形，只需要將border的left、right、bottom設定成背景色就行了：

 

　　這樣，我們需要的三角形就出現了，並且可以設定4個不同方向的了：

       

　　樣式代碼很簡單，就幾句話：

<strong style="float:left; border-style:solid; border-width:10px; border-color:#000 #ccc #ccc #ccc; height:0; width:0; font-size:0"></strong>

　　東西很簡單，但很想到用border邊框來製作三角形箭頭確實有點劍走偏鋒了，用的相當巧妙。

　　相關閱讀：《CSS3 @font-face實現顏色大小可控的三角效果》

　　　　　　　《告別圖片—使用字元實現相容性的圓角尖角效果beta版》

　　PS：因為園子裡發的demo不能出現空標籤，也就是我必須在<strong></strong>標籤裡加個空格，如：<strong>&nbspl;</strong>，但這就導致IE6下顯示錯誤，其實是可以的，大家試試就知道了。