1.很早就用这个来做箭头了 但是之前都是将border设为solid的 但是就要设背景色 如果背景色改了 效果就出错了~ 如果设为透明 则不兼容IE6
现在设为dashed 就可以设为透明 也可以兼容IE6了
2.其中line-height:0;与oveflow:hidden;需保留其中之一才可以兼容ie6
代码如下：
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css实现的箭头</title> <style type="text/css"> .wrap { width:200px; height:50px; position:relative; margin-top:50px; background:#080; } .arrow { width:0; height:0; line-height:0;/*for ie6*/ position:absolute; left:50%; margin-left:-17px; top:-32px; font-size:0; border-width:16px; border-color:transparent transparent #080; border-style:dashed dashed solid;/*dashed for ie6*/ overflow:hidden;/*for ie6*/ } .test{ position:absolute; width:0px; height:0px; font-size:0px; border-width:8px; border-style:dashed dashed solid dashed; border-color:transparent transparent #30C transparent; overflow:hidden; } </style> </head> <body> <div class="wrap"> <div class="arrow"></div> </div> <br/> <div class="test"></div> </body> </html>