图片中的箭头用的都是背景图片。
先找到保存这些图片下来,然后再写相应的CSS。
css背景代码:
background:url(bgimage.jpg) no-repeat -2px 0px //后面的-2px 0px可以去掉或者调整相应的图片坐标位置使用
当然,其他任意方向也是可以的,只需要控制旋转角度rotate即可。原理是构造了一个正方形,隐藏了其中的两条边left和bottom,然后进行旋转。
通过使用正方形左下两条边,并向下向右平移,再旋转,得到一个向下并居中的箭头
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">.menu{border:solid 1px bluewidth:140pxfont-size:16pxpadding:5pxmargin:0 auto}.menu a{display:blocktext-align:centercolor:redwidth:130pxheight:1.5empadding:4pxtext-decoration:noneposition:relative}.menu span{display:blockborder-style:solidborder-width:8pxoverflow:hiddenposition:absolutetop:4pxwidth:0pxheight:0pxoverflow:hidden}.menu a:link span{display:none}.menu a:hover span.left{display:blockborder-color:whiteborder-left-color:blackleft:8px}.menu a:hover span.right{display:blockborder-color:whiteborder-right-color:blackright:8px} http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 我改了一下,在IE7和FF3下测试通过,不知道是不是你要的效果,如果有出入的话我们可以再交流。