最近在仿京東的首頁，看了下京東的網頁 有些文字背后都帶有一些向下的箭頭【◇】 鼠標移動上去之后又變為向上。開始以為是使用的背景圖，后來發現是使用CSS實現的，大概看了下，想出了下面的實現方法：
元素的邊框其實是一個正方形實現的 通過給四個方法的邊框定義不同的color 和 style 可以實現某個方位的邊框為透明的。
如圖：
如果需要一個向上的實心的箭頭 那么可以讓邊框的 上 右 左 三邊的color為transparent style為dashed 下邊的color為你需要的顏色 style為solid既可以實現！
下面來說下如何實現一個空心的箭頭，大致的思路就是使用兩個邊框來重疊獲取 。
如果需要一個向下的空心箭頭 ，可以使用兩個實心的箭頭來重疊獲取
首先，讓兩個邊框重疊在一起 使用 position定位 將兩個邊框的位置重疊
其次，設置某個邊框的位置相對另一個邊框的位置的top值大一個像素：top:1px
三，經過上一步，重疊的兩個邊框就有一個是突出了一個像素的，我們要的就是這一個像素。將突出了一個像素的邊框的color設為箭頭需要的顏色 將另一個邊框的color設為元素所在父元素的背景色，這樣就可以看到一個空心的箭頭了！如圖：
如果 黑色三角的顏色設置為父元素的背景色 覆蓋之后則只有淡藍色的箭頭了。實現代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>空心箭頭</title> <style type="text/css"> *{ padding:0px; margin:0px; } #box{ width:100px; height:100px; margin:0 auto; /*border:1px solid red;*/ position:relative; background:white; } .tip{ width:12px; height:12px; position:absolute; left:0px; top:0px; /*border:1px solid blue;*/ } .em1,.em2{ width:0px; height:0px; display:block; position:absolute; left:0px; top:0px; border-top:5px transparent dashed; border-right:5px transparent dashed; border-bottom:5px transparent dashed; border-left:5px white solid; overflow:hidden; } .em1{ left:1px; border-left:5px gray solid; } .em2{ border-left:5px white solid; } </style> </head> <body> <div id="box"> <b class="tip"><i class="em1"></i><i class="em2"></i></b> </div> </body> </html>