首页 > 代码库 > 关于纯css写三角形在firefox下的锯齿问题
关于纯css写三角形在firefox下的锯齿问题
相信很多人都用过利用border来实现小三角箭头，百度一下，这类的文章多如牛毛，这里我还是啰嗦点把常用的方法陈列出来：
.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;}
或者：
.border_bottom{ width:0; height:0; border:10px solid transparent; border-bottom: 11px solid #000; }
这样写都有个问题，就是在firefox里面会有锯齿，看着就不爽，如下左图，这是放大后的，三角越小锯齿越明显，其他浏览器很润滑，下面的右图。
在网上搜索很少有人提到，有提到的好像也没实际解决，下面介绍个非常简单的方法，就是给有颜色的那个border宽度多加一个像素：
.border_bottom{ width:0; height:0; border:50px solid transparent; border-bottom: 51px solid #000; }
是不是很滑....
关于纯css写三角形在firefox下的锯齿问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。