如何解决纯css写三角形在firefox下的锯齿问题

这篇文章主要介绍“如何解决纯css写三角形在firefox下的锯齿问题”，在日常操作中，相信很多人在如何解决纯css写三角形在firefox下的锯齿问题问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何解决纯css写三角形在firefox下的锯齿问题”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

CSS Code复制内容到剪贴板

1. .triangle_border_up{   

2.     width:0;   

3.     height:0;   

4.     border-width:0 30px 30px;   

5.     border-style:solid;   

6.     border-color:transparent transparent #333;/*透明 透明  灰*/  

7.     margin:40px auto;   

8.     position:relative;   

9. }   

或者：

CSS Code复制内容到剪贴板

1. .border_bottom{   

2.                 width:0;   

3.                 height:0;   

4.                 border:10px solid transparent;   

5.                 border-bottom: 11px solid #000;   

6.             }   

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

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

CSS Code复制内容到剪贴板

1. .border_bottom{   

2.                 width:0;   

3.                 height:0;   

4.                 border:50px solid transparent;   

5.                 border-bottom: 51px solid #000;   

6.             }  

是不是很滑....

到此，关于“如何解决纯css写三角形在firefox下的锯齿问题”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！