Firefox 中边界边之间的阴影和失真

Question

我一直在使用 CSS 边框属性以及伪元素 :before 和 :after 来使我的元素具有几何形状的外观，一个简单的示例如下：

HTML：

<div id="shapeOne"></div>

CSS：

#shapeOne
{
   height:0px;
   width:0px;
   margin:20px;
   border-style:solid;
   border-width:200px 200px 200px 200px;
   border-color:transparent #f00 #0f0 transparent;  
}

因此，通过使两个边框透明并赋予两种颜色，我有效地制作了一个三角形。

你可以在这里看到一个例子：http://jsfiddle.net/VTzS9/1/

这似乎在除 Firefox 之外的所有浏览器中都能正常显示（特别是 PC 版本，因为它在 Mac 上的 Firefox 上看起来很正常）。问题是 Firefox 似乎在边框边之间放置了阴影/扭曲效果，并在边框中创建了一个“扭结”（空元素所在的位置）——随着不同边框边之间大小差异的增加，这种效果也会增加- 因此，如果边框尺寸相等（我在上面的链接中的第一个形状），问题几乎没有（但仍然）明显，但是随着边框尺寸之间的差异增加（我的链接中的形状 2 和 3），效果变得更加明显。

有谁知道是什么原因造成的，如果有什么我可以做的来消除这种影响？

干杯！

Answer 1

使用

rgba(255,255,255,0) 

而不是

transparent

.

这将使它也可以在 Firefox 上运行。

演示：http://jsfiddle.net/SkXXy/

P.S：同样的问题：Weird dark border :after css arrow in Firefox