2

我一直在使用 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），效果变得更加明显。

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

干杯!

4

1 回答 1

2

利用

rgba(255,255,255,0)

代替

transparent

.

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

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

PS：这里的同样问题：奇怪的深色边框：在 Firefox 中的 css 箭头之后

于 2013-01-17T10:30:08.430 回答