最近在仿京东的首页，看了下京东的网页 有些文字背后都带有一些向下的箭头【◇】 鼠标移动上去之后又变为向上。开始以为是使用的背景图，后来发现是使用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>