Firefox CSS3等腰三角形渲染问题

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

有办法解决这个问题吗

下面是一个例子：

CSS:

HTML:

---

（Firefox渲染左边的那条）

看起来Firefox仍然存在锯齿线的问题

解决方法：
我来这里是为了解决这个问题： 也许它能帮你摆脱困境-不保证

备选方案一：
使所有边框大小相同（在您的示例中，例如50px），则不会看到锯齿线。可以使用边框大小缩放箭头的大小

备选方案二：
使用图像（不应是巨大的请求/加载时间…）

---

编辑：

成功了！：
诀窍是添加这行代码：

边框样式：实线虚线无

编辑2020:

现在不再需要这种老套的解决方法了。更新的小提琴

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

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