解決純css寫三角形在firefox下的鋸齒問題
發(fā)布時(shí)間：2016-03-09 15:09:47 作者：彼岸花在開 
我要評(píng)論
我要評(píng)論這篇文章主要幫助大家解決純css寫三角形在firefox下的鋸齒問題，css如何實(shí)現(xiàn)小三角箭頭，文章為大家列出了常用方法，感興趣的小伙伴們可以參考一下
相信很多人都用過利用border來實(shí)現(xiàn)小三角箭頭，百度一下，這類的文章多如牛毛，這里我還是啰嗦點(diǎn)把常用的方法陳列出來：
CSS Code復(fù)制內(nèi)容到剪貼板
- .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復(fù)制內(nèi)容到剪貼板
- .border_bottom{
- width:0;
- height:0;
- border:10px solid transparent;
- border-bottom: 11px solid #000;
- }
這樣寫都有個(gè)問題，就是在firefox里面會(huì)有鋸齒，看著就不爽，如下左圖，這是放大后的，三角越小鋸齒越明顯，其他瀏覽器很潤滑，下面的右圖。
在網(wǎng)上搜索很少有人提到，有提到的好像也沒實(shí)際解決，下面介紹個(gè)非常簡單的方法，就是給有顏色的那個(gè)border寬度多加一個(gè)像素：
CSS Code復(fù)制內(nèi)容到剪貼板
- .border_bottom{
- width:0;
- height:0;
- border:50px solid transparent;
- border-bottom: 51px solid #000;
- }
是不是很滑....
以上就是為大家分享的文章，希望對(duì)大家的學(xué)習(xí)有所幫助。
原文：http://www.cnblogs.com/hutuzhu/p/4169252.html
相關(guān)文章
- 本文給大家?guī)硪欢未a基于div+css實(shí)現(xiàn)三角形提示框，代碼簡單易懂，需要的朋友可以參考下2016-09-20
- 下面小編就為大家?guī)硪黄肅SS制作三角形和按鈕的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-15
CSS仿網(wǎng)易首頁的頭部菜單欄按鈕和三角形制作方法
這篇文章主要介紹了CSS仿網(wǎng)易首頁的頭部菜單欄按鈕和三角形制作方法的相關(guān)資料,需要的朋友可以參考下2016-08-15利用CSS偽元素創(chuàng)建帶三角形的提示框的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄肅SS偽元素創(chuàng)建帶三角形的提示框的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-01- 這篇文章主要為大家詳細(xì)介紹了純CSS繪制三角形箭頭圖案技術(shù)，如何使用:before和:after繪制CSS三角形，感興趣的小伙伴們可以參考一下2016-06-28
- 這篇文章主要教大家使用css繪制透明三角形，css繪制三角形很簡單，如何繪制透明的三角形，本文為大家解決這個(gè)問題，感興趣的小伙伴們可以參考一下2016-03-10
這篇文章主要介紹了CSS代碼實(shí)現(xiàn)三角形和餅圖的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-08-03
