前言:

有时候我们需要用纯CSS来写小三角,如下图:

代码:

HTML:


<div class="pointer"></div>

CSS:

body{background-color:yellow;}
.pointer{width:0;height:0;border-top:100px transparent solid;border-right:200px red solid;font-size:0;}

为了方便看效果,特意放大

问题:

正常显示效果:

IE6下却遭遇BUG(不透明):

解决方法:

将实线改为虚线,代码:

body{background-color:yellow;}
.pointer{width:0;height:0;border-top:100px transparent <strong>dotted;/*dashed亦可*/</strong>border-right:200px red solid;font-size:0;}

IE6下显示效果:

虽然边缘有轻微锯齿,但可以接受

意外收获:

Firefox、Chrome边缘比较平滑

而IE 6/7/8、Opera、Safari边缘有轻微锯齿