相信很多人都用过利用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. 实验三敏捷开发与XP实践《Java开发环境的熟悉》实验报告

    一.实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程 2.完成实验.撰写实验报告,实验报告以博客方式发表在博客园,注意实验报 ...

  2. PHP会话cookie类的封装

    <?php header('content-type:text/html;charset=utf-8');/** * 完成cookie的设置.删除.更新.读取 */class Cookie{   ...

  3. spider_keeper

    一 简介 spider_keeper 是一款开源的spider管理工具,可以方便的进行爬虫的启动,暂停,定时,同时可以查看分布式情况下所有爬虫日志,查看爬虫执行情况等功能. 二 安装 部署 安装环境 ...

  4. 基础篇:6.9)GD&T较线性尺寸公差的优缺点

    本章目的:理解GD&T标注对比线性/传统/坐标尺寸公差的优势,但也不要忘记其使用限制. 1.线性尺寸公差   1.1 定义 线性尺寸公差=传统尺寸公差=坐标尺寸公差. 传统尺寸公差(Tradi ...

  5. PHP 数字金额转换成中文大写金额的函数 数字转中文

    /** *数字金额转换成中文大写金额的函数 *String Int $num 要转换的小写数字或小写字符串 *return 大写字母 *小数位为两位 **/ function num_to_rmb($ ...

  6. 为什么要选择RabbitMQ ,RabbitMQ简介,各种MQ选型对比

    原文:https://www.sojson.com/blog/48.html 前言: MQ 是什么?队列是什么,MQ 我们可以理解为消息队列,队列我们可以理解为管道.以管道的方式做消息传递. 场景: ...

  7. input 标签只能输入数字

    $("input[name='contact']").keyup(function(){ $("input[name='contact']").attr(&qu ...

  8. 4.nginx高可用

    1.大体结构 一.使用场景介绍: nginx做负载均衡,来达到分发请求的目的,但是不能很好的避免单点故障,假如nginx服务器挂点了,那么所有的服务也会跟着瘫痪 .keepalived+nginx,就 ...

  9. qt下qmake:提示could not exec '/usr/lib/x86_64-linux-gnu/qt4/bin/qmake': No such file or directory

    编译出现的问题解决方法: 打开终端输入,qmake -v,出现错误:qmake: could not exec '/usr/lib/x86_64-linux-gnu/qt4/bin/qmake': N ...

  10. (转)MySQL Proxy使用

    转自: http://www.cnblogs.com/itech/archive/2011/09/22/2185365.html http://koda.iteye.com/blog/788862 h ...