关于纯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;
            }

是不是很滑....

 

转载于:https://www.cnblogs.com/hutuzhu/p/4169252.html