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

.triangle_border_up{
width:;
height:;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:40px auto;
position:relative;
}

或者:

.border_bottom{
width:;
height:;
border:10px solid transparent;
border-bottom: 11px solid #000;
}

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

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAABCCAIAAAAT54VOAAABjUlEQVR4nO3S0Q7CMAxD0f7/T48XEAJNy2gd2ym576uco42jozTUA/6lhibV0KQamlRDk2poUu7Q45V6yGrWB4zP1HOW8l0/zlKPms90+qlyaWvH3RfKda3tRofKRa29Ft9UrmhtNPcn5XLWLlsnlGtZWwydVi5krV+5qFzFWjwRolzCWrkPqOxvLRsHVza31ixLUna2FsxKVba1Zm8iKHtaUwfRlA2teWvIym7WpCkSZStrxg6hso91+gg18rPsM2OH3NedSr00pkh82q+8Y2ONrHctSzr2FkjKo95lnByb4F+sEPzqmAX8XJ2wh8cyyLeqBbw9xoE9VDPU+bEP5pXKQQRiIsAT9VtHiJVWv98liOYV1NLHe4UyPbea/3LHgLLfXJOf7RvW9y02883uwZWPCWg1AikxtPp8ajJo9eGCBNDqk2VRodXHiiNBq8+0KB1afaBRidDq0+xKgVYfZRoYWn2OdTBo9SEFAkCrTygT4I/uMmpoUg1NqqFJNTSphibV0KQamlRDk2poUg/bQE4oq4q+9wAAAABJRU5ErkJggg==" alt="" />aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHkAAABACAIAAACx7U97AAABn0lEQVR4nO3b243EMAxDUZecEtxBSt79EDCDDbJ52BJFyboVEOef7adC1bwHLFRZ4yprXGWNq6xxUVtv27bvu/cKtXite++ttdZa7917i06k1h/oTNyM1gfoNNx01qfQObi5rC+gE3ATWd9CR+dmsX4IHZqbwvoVdFxuf+sB6KDcztbD0BG5Pa0nocNxu1mrQMfi9rFWhA7E7WCtDh2FG21tBB2CG2ptCs3PjbMGQJNzg6xh0MzcCGswNC23ubULNCe3rbUjNCG3obU7tMTDbWVNAi2RcJtYU0FLDNz61oTQkju3sjUttOTLrWlNDi05cqtZh4CWvLh1rANBSy7cCtbhoCU896x1UGgJzD1lHRpaQnKPWyeAlmDcg9ZpoCUM94h1MmgJwP3aOiW0ZM39zjoxtGTK/cI6PbRkx/3UehFoyYj7kfVS0JIF9731gtCSOveN9bLQki73lfXi0JIi97/WBf1Ji/vcuqAPqXCfWBf0afPcR+uCvmiS+491Qd82w/21LuiHDXP7f0nXqaxxlTWussZV1rjKGldZ4yprXL9d1Tqz8lf0YQAAAABJRU5ErkJggg==" alt="" />

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

.border_bottom{
width:;
height:;
border:50px solid transparent;
border-bottom: 51px solid #000;
}

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAABICAIAAACoQEamAAABmElEQVR4nO3SQQ4CMQxD0dz/0rCYLJAQaKaNY6fy39NxnoiXgxXsASdnXGDGBWZcYMYFZlxgxgVmXGDGBWZcYGNwIyJizNqrGXPjI/aWBw3YGl+xF91Nfei37CBf6ZW/ZKf46k78LzvCV3TfHVl9X8Vx92XFfeWWPZVV9tWatSYr6yu0aUdW01dl0L6soK/EmipZNV/+lFpZKV/yDoSsji9zBE5WxJe2AC2r4Mv5fI8s3Zfw7U5Zrm/3h/tlib6tX2XJsnz7PsmVvWo7Nk9u+oxMPffm1R3fEKvh5Dwc/gHJ0Ffn7djXhYMenucDn5YPd3sKoN4dEuj8RIA8OiqEQDrUvziwcoSkKH5ubLUOqVH51vAKKRKk7KEjqtJIk5pXDqoEJFkKnjiufZOU2f39ofFx2QLYmLjs2zvi4LKv7qsbl31vd3247Es5deCyb2SGxWVfxw+Fy75LpXpc9kVaVeKyb1GsBpd9hW67uOz96q3jspfPaAWXvXlSK/9ct59xgRkXmHGBGReYcYEZF5hxgRkXmHGBGRfYG4CvvfA4zvFrAAAAAElFTkSuQmCC" alt="" />

是不是很滑....

关于纯css写三角形在firefox下的锯齿问题的更多相关文章

  1. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  2. 利用纯css写三角形,弧度箭头,吃豆人,气泡。放大镜,标签的源码

    1. 向上三角形

  3. 纯css 写三角形

    <div style="width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid tr ...

  4. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  5. 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...

  6. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  7. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  8. CSS学习笔记(8)--纯CSS绘制三角形(各种角度)

    纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单.   我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...

  9. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

随机推荐

  1. 低版本php对json的处理

    由于低版本php(php5以下)没有json_encode和json_decode 所以有下面函数实现 function json_encode($data) { switch ($type = ge ...

  2. java使用freemarker导出复杂的excel表格

    正常导出excel表格使用的poi,但是导出复杂的excel有点困难,但是可以使用freemaker模板来导出复杂的excel. 1.都是先生成一个Excel表格的模板,最好是增加一行数据.具体看图里 ...

  3. centos7 systemd 必知必会

    systemd 简介: systemd 是一个 Linux 系统基础组件的集合, 提供了一个系统和服务管理器, 运行为 PID 1 并负责启动其它程序 功能包括: 1.支持并行化任务 2.同时采用 s ...

  4. 851 AlvinZH的鬼畜密码(背包DP大作战N)

    851 AlvinZH的鬼畜密码 思路 难题.动态规划. 先判断字符串是否合理(可翻译),然后分段处理,每一小段用动态规划求出解法数. dp[i]:字符串str[0~i]的解法数.通过判断str[i] ...

  5. Flume启动运行时报错org.apache.flume.ChannelFullException: Space for commit to queue couldn't be acquired. Sinks are likely not keeping up with sources, or the buffer size is too tight解决办法(图文详解)

        前期博客 Flume自定义拦截器(Interceptors)或自带拦截器时的一些经验技巧总结(图文详解) 问题详情 启动agent服务 [hadoop@master flume-1.7.0]$ ...

  6. maven build 添加到 META-INF 目录。

    <build> <resources> <resource> <directory>src/main/resources</directory&g ...

  7. 持续集成、持续交付、持续部署、Jkens、git

    一  持续集成.持续交付.持续部署 1. 持续集成 持续集成指的是,频繁地(一天多次)将代码集成到主干.持续集成的目的,就是让产品可以快速迭代,同时还能 保持高质量.它的核心措施是,代码集成到主干之前 ...

  8. 自学springboot

    参考资料 https://www.renren.io/guide/

  9. Netty构建Http服务器

    Netty 是一个基于 JAVA NIO 类库的异步通信框架,它的架构特点是:异步非阻塞.基于事件驱动.高性能.高可靠性和高可定制性.换句话说,Netty是一个NIO框架,使用它可以简单快速地开发网络 ...

  10. PL/SQL 游标

    本随笔不是原创,只是学习笔记,用于加深记忆,原创地址PL/SQL --> 游标 一.游标的相关概念和特性 1.定义: 映射到结果集中的某一行的特定位置,类似与C语言中的指针.即通过游标方式定位到 ...