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)（找到on SO）。

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

This bug，在12年提交，仍然标记为“新的”，有点相关，并没有尝试解决方案。

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

Answer 1

将border-style的{{1}}更改为border-right在Firefox 32.0.3上为我工作，同时添加outset和height: 0;以删除发际线。< / p>

＆＃13;

width: 0;

＆＃13;

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

＆＃13;

如果您只想在＆＃39;固定旋转＆＃39;中使用三角形。你可以看一下这个网站：

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

＆＃13;

<div></div>

＆＃13;

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

＆＃13;

Answer 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

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

Firefox中的CSS形状消除锯齿

3 个答案: