DIV CSS 佈局教程網

這篇文章主要幫助大家解決純css寫三角形在Firefox下的鋸齒問題，CSS如何實現小三角箭頭，文章為大家列出了常用方法，感興趣的小伙伴們可以參考一下

相信很多人都用過利用border來實現小三角箭頭，百度一下，這類的文章多如牛毛，這裡我還是啰嗦點把常用的方法陳列出來：

CSS Code復制內容到剪貼板

1. .triangle_border_up{
2. width:0;
3. height:0;
4. border-width:0 30px 30px;
5. border-style:solid;
6. border-color:transparent transparent #333;/*透明 透明 灰*/
7. margin:40px auto;
8. position:relative;
9. }

或者：

CSS Code復制內容到剪貼板

1. .border_bottom{
2. width:0;
3. height:0;
4. border:10px solid transparent;
5. border-bottom: 11px solid #000;
6. }

這樣寫都有個問題，就是在Firefox裡面會有鋸齒，看著就不爽，如下左圖，這是放大後的，三角越小鋸齒越明顯，其他浏覽器很潤滑，下面的右圖。

在網上搜索很少有人提到，有提到的好像也沒實際解決，下面介紹個非常簡單的方法，就是給有顏色的那個border寬度多加一個像素：

CSS Code復制內容到剪貼板

1. .border_bottom{
2. width:0;
3. height:0;
4. border:50px solid transparent;
5. border-bottom: 51px solid #000;
6. }

是不是很滑....

以上就是為大家分享的文章，希望對大家的學習有所幫助。