Firefox中CSS形狀的反鋸齒

在Firefox中，無論是否旋轉，三角形都具有鋸齒狀/鋸齒邊緣。Firefox中CSS形狀的反鋸齒

CSS（HTML只是<div></div>）

div { 
    border-top: 10px solid rgba(255, 255, 255, 0); 
    border-right: 70px solid #777; 
    border-bottom: 10px solid rgba(255, 255, 255, 0); 
    transform: rotate(90deg); 
}

對於填補他們的盒子形狀，你可以申請outline: 1px solid transparent。

對於未旋轉的形狀，您可以簡單地應用transform: scale(.999)（找到on SO）。

但是，如果我將CSS的最後一行更改爲transform: rotate(90deg) scale(.999)，仍會出現鋸齒。

This bug，在12年提交併仍標記爲「新」，有點相關，並且沒有嘗試解決方案。

是否有任何其他hacky解決方法可以在Firefox中獲得平滑的旋轉三角形？擺脫中間的髮際線將是一個加號。

來源

2014-10-09 willlma

沒有什麼可添加的，但感謝你和谷歌我擺脫了我的邊界形狀的別名，謝謝！ – Codemonkey 2015-01-17 13:40:43

更改border-right到outset爲我工作在Firefox 32.0.3中的border-style，還添加height: 0;和width: 0;去除髮際線。

div { 
 
    height: 0; 
 
    width: 0;  
 
    border-top: 10px solid rgba(255, 255, 255, 0); 
 
    border-right: 70px outset #777; 
 
    border-bottom: 10px solid rgba(255, 255, 255, 0); 
 
    transform: rotate(90deg); 
 
    margin:40px; 
 
}

<div></div>

如果你只是想使用 '固定旋轉' 位置的三角形，你可以在這個網站看看：

http://apps.eky.hk/css-triangle-generator/

div { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: inset; 
 
    border-width: 70px 10px 0 10px; 
 
    border-color: #777777 transparent transparent transparent; 
 
}

<div></div>

來源

2014-10-14 10:11:28

JS Fiddle

如果使用border:dotted修復該問題，並從中間

div { 
    width: 0; 
    height: 0; 
    border-style: dotted solid dotted solid; 
    border-color: transparent transparent transparent #777777; 
    border-width: 10px 0 10px 70px; 
    transform: rotate(-90deg); 
    margin:40px; 
}

引用添加width:0和height:0刪除1px空間：http://blog.dustinboersma.com/post/45768836072/fixing-osx-firefox-border-triangle-pixelation

來源

2014-10-14 10:39:21

你的小提琴並不是一個三角形，而是一個圓形，對於我來說，我使用'border-right：70px outset＃777;'工作：'雖然：http://jsfiddle.net/eaz9mo6m/9/ – 2014-10-14 10:43:58

非常奇怪，你的代碼似乎在Chrome瀏覽器工作，但爲Firefox 32.0.3破解（截圖：http://i.imgur.com/I4nX8Od.png?1），但引用的博客作品代碼.. – 2014-10-14 12:16:28

編輯答案@NickRussler – 2014-10-14 15:18:45

這似乎在Firefox更好的工作，但Chrome有點參差不齊。如果寬度和高度相等，你可以很容易地控制三角形變換：

div { 
    width:100px; 
    height:100px; 
    margin:0 auto;  
    background: linear-gradient(-45deg, #777 50%, #fff 50%); 
    transform: translate(0,100px) rotate(-135deg) skew(35deg,35deg); 
}

來源

2014-10-15 13:13:30

Firefox中CSS形狀的反鋸齒

回答

相關問題