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

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

您可以在此处查看示例:http://jsfiddle.net/VTzS9/1/

这似乎在除 Firefox 之外的所有浏览器中都显示良好(特别是 PC 版本，因为它在 Mac 上的 Firefox 上看起来很正常)。问题是 Firefox 似乎在边框两侧之间放置了阴影/扭曲效果，并在边框(空元素所在的位置)中创建了一个“扭结” - 并且这种效果随着不同边框两侧之间的大小差异的增加而增加- 因此，在边框大小相同(上面链接中的第一个形状)的情况下，问题几乎(但仍然)明显，但是随着边框大小之间的差异增加(我的链接中的第二个和第三个形状)，效果变得更加明显。

有谁知道造成这种情况的原因，以及我是否可以采取任何措施来消除这种影响？

干杯!

Answer 1

使用

rgba(255,255,255,0) 

而不是

transparent

.

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

Demo: http://jsfiddle.net/SkXXy/

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