經常寫移動端頁面時會用到向右的箭頭，之前都是用圖片，突然想到用css應該也能寫，於是一搜還確實有 原理也挺簡單，就是寫個上邊框和右邊框，然后旋轉45度就是向右的箭頭了。不過移動端用應該沒問題，pc上就要考慮transform的兼容性了。 ...

width: 7px; height: 7px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; transf ...

代碼： 圖片資源 ...

最近在仿京東的首頁，看了下京東的網頁 有些文字背后都帶有一些向下的箭頭【◇】 鼠標移動上去之后又變為向上。開始以為是使用的背景圖，后來發現是使用CSS實現的，大概看了下，想出了下面的實現方法： 　　元素的邊框其實是一個正方形實現的 通過給四個方法的邊框定義不同的color 和 style ...

.home_list li:after { position: absolute; right: 10px; top: 50%; display: inlin ...

...

效果如下： ...

小箭頭的實現 原理 　　(1)使用css繪制兩個三角形 　　(2)通過絕對定位讓兩個三角形不完全重疊 　　(3)讓處於上層的三角形比處於下層的三角形偏移1像素，生成空心箭頭 　　兼容處理： 　　　　在IE6及更低版本的瀏覽器中添加font-size: 0; line-height ...