解决纯css写三角形在firefox下的锯齿问题
发布时间：2016-03-09 15:09:47 作者：彼岸花在开 
我要评论
我要评论这篇文章主要帮助大家解决纯css写三角形在firefox下的锯齿问题，css如何实现小三角箭头，文章为大家列出了常用方法，感兴趣的小伙伴们可以参考一下
相信很多人都用过利用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
相关文章
- 本文给大家带来一段代码基于div+css实现三角形提示框，代码简单易懂，需要的朋友可以参考下2016-09-20
- 下面小编就为大家带来一篇用CSS制作三角形和按钮的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-15
- 这篇文章主要介绍了CSS仿网易首页的头部菜单栏按钮和三角形制作方法的相关资料,需要的朋友可以参考下2016-08-15
- 下面小编就为大家带来一篇利用CSS伪元素创建带三角形的提示框的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-01
- 这篇文章主要为大家详细介绍了纯CSS绘制三角形箭头图案技术，如何使用:before和:after绘制CSS三角形，感兴趣的小伙伴们可以参考一下2016-06-28
- 这篇文章主要教大家使用css绘制透明三角形，css绘制三角形很简单，如何绘制透明的三角形，本文为大家解决这个问题，感兴趣的小伙伴们可以参考一下2016-03-10
这篇文章主要介绍了CSS代码实现三角形和饼图的方法，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-08-03
最新评论