css - Firefox CSS3 等腰三 Angular 形渲染问题

Question

我正在尝试使用 CSS3 创建等腰三 Angular 形，但 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:
使所有边框大小相同(在您的示例中，例如 50 像素)，那么您将不会看到锯齿状线条。您可以使用 border-size 缩放箭头的大小。

备选方案 II:
使用图像(不应占用大量请求/加载时间...)

---

编辑:

成功了!:jsfiddle
诀窍是添加这行代码:border-style: solid dotted none;

2020 年编辑:
不再需要 hacky 解决方法。更新了 fiddle 。