用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"></strong> 　　東西很簡單，但很想到用border邊框來製作三角形箭頭確實有點劍走偏鋒了，用的相當巧妙。相關文章：http://hi.baidu.com/kuikui100/item/2c2bbfdfe0d35713d78ed001