Firefox中CSS形状的抗锯齿

Question

在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)（位于SO上）。

但是，如果我将CSS的最后一行更改为transform: rotate(90deg) scale(.999)，仍然会出现别名。

早在12年就提交并仍标记为“新”的错误，在某种程度上是相关的，并且尚未尝试解决。

是否有其他解决方法可在Firefox中获得平滑的旋转三角形？摆脱中间的发际线将是一个加号。

Answer 1

改变border-style的border-right对outset工作对我来说在Firefox 32.0.3，还可以添加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>