相信很多人都用过利用border来实现小三角箭头，百度一下，这类的文章多如牛毛，这里我还是��嗦点把常用的方法陈列出来：

CSS Code 复制内容到剪贴板 .triangle_border_up{         width :0;         height :0;         border-width :0  30px   30px ;         border-style : solid ;         border-color : transparent   transparent   #333 ; /*透明 透明  灰*/         margin : 40px   auto ;         position : relative ;    }   

或者：

CSS Code 复制内容到剪贴板 .border_bottom{                     width :0;                     height :0;                     border : 10px   solid   transparent ;                     border-bottom :  11px   solid   #000 ;                }   

这样写都有个问题，就是在firefox里面会有锯齿，看着就不爽，如下左图，这是放大后的，三角越小锯齿越明显，其他浏览器很润滑，下面的右图。

在网上搜索很少有人提到，有提到的好像也没实际解决，下面介绍个非常简单的方法，就是给有颜色的那个border宽度多加一个像素：

CSS Code 复制内容到剪贴板 .border_bottom{                     width :0;                     height :0;                     border : 50px   solid   transparent ;                     border-bottom :  51px   solid   #000 ;                }  

是不是很滑....

以上就是为大家分享的文章，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/hutuzhu/p/4169252.html