Firefox CSS3 isosceles三角形渲染问题

Question

我正在尝试使用CSS3创建一个等腰三角形，看起来Firefox无法正确渲染它们？

有没有办法解决这个问题？

以下是一个例子：

http://jsfiddle.net/WajLY/1/

CSS：

.arrow {
  vertical-align: middle;
  content: "";
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-top: 75px solid #222;
  width: 0;
  height: 0;
}

HTML：

<div class="arrow"></div>

（Firefox渲染左侧的那个）

Answer 1

似乎firefox仍然存在锯齿状线的问题。

解决方法：
我遇到了这个解决方法：Example 也许它会帮助你 - 不能保证。

替代I：
使所有边框的大小相同（在您的示例中为50px），然后您将看不到锯齿状的线条。您可以使用border-size缩放箭头的大小。

备选方案II：
使用图片（不应该是巨大的请求/加载时间......）

<小时/> 修改

搞定了！：jsfiddle
诀窍是添加这行代码：border-style: solid dotted none;

最好的问候。