Firefox 中 CSS 形状的抗锯齿答案

【问题标题】：Anti-aliasing on CSS shapes in FirefoxFirefox 中 CSS 形状的抗锯齿
【发布时间】：2014-12-04 23:19:57
【问题描述】：

在 Firefox 中，无论是否旋转，三角形都有锯齿/锯齿边缘。

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 年提交并仍标记为“新”，有点相关，尚未尝试解决。

在 Firefox 中是否有任何其他 hacky 变通方法来获得平滑的旋转三角形？摆脱中间的发际线将是一个加号。

【问题讨论】：

没什么可添加的，但感谢您和谷歌，我已经摆脱了边框形状上的锯齿，谢谢！

标签： css geometry css-transforms antialiasing css-shapes

【解决方案1】：

在 Firefox 32.0.3 上将 border-right 的 border-style 更改为 outset 对我有用，还可以添加 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;
}

&lt;div&gt;&lt;/div&gt;

如果您只想在“固定旋转”位置使用三角形，您可以查看此网站：

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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

JS Fiddle

如果您使用border:dotted，它会解决问题并添加width:0 和height:0 以从中间删除1px 空格

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;
}

参考：http://blog.dustinboersma.com/post/45768836072/fixing-osx-firefox-border-triangle-pixelation

【讨论】：

你的小提琴对我来说不是三角形而是圆形，我和border-right: 70px outset #777;一起工作：jsfiddle.net/eaz9mo6m/9
很奇怪，您的代码似乎可以在 chrome 中运行，但在 Firefox 32.0.3 中出现故障（屏幕截图：i.imgur.com/I4nX8Od.png?1），但引用博客中的代码有效..

【解决方案3】：

这似乎在 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);
}

【讨论】：