为什么Firefox会在CSS形状下面显示阴影？

如图所示，我在我的网站上使用了一个三角形：http://css-tricks.com/examples/ShapesOfCSS/为什么Firefox会在CSS形状下面显示阴影？

不幸的是，这在浏览一段时间后无法正确显示浏览器。

我的代码

div.triangle { 
    width:0px; 
    height:0px; 
    border-left: 55px solid transparent; 
    border-right: 55px solid transparent; 
    border-top: 15px solid #D5CDBA; 
}

http://jsfiddle.net/mPSj9/5/

使火狐产生形状下方一些更暗线。为什么是这样，我可以摆脱它？

来源

2012-11-27 unR

它不是一个影子，它的颜色，这是因为border-left, border-right颜色

Demo

CSS

div.main-link-active-triangle { 
    position:absolute; 
    top:50px; 
    left:50px; 
    width:0px; 
    height:0px; 
    border-left: 55px solid transparent; 
    border-right: 55px solid transparent; 
    border-top: 55px solid #D5CDBA; 
}

Width Background Color

几例的：CSS triangle custom border color

正如@Aleks Dorohovich说，你可以使用rgba() CSS3属性，使边框不透明的，但是（注：不会对< = IE8工作）

来源

2012-11-27 10:23:13

好的，但我需要有三角形平展，只有15px高。 – unR

不错的工作，编辑你的答案后，另一个老兄发布了工作解决方案完全不同:) – unR

@unR编辑正确的答案不是一件坏事，它的网站，说编辑答案，纠正他们，我尊重他回答太..我要在那里陈述他的名字 –

试图改变透明属性RGBA不透明度0

例如：

border-left: 55px solid rgba(255,255,255,0); 
border-right: 55px solid rgba(255,255,255,0);

来源

2012-11-27 10:28:26

很好这个作品，非常非常 – unR

为什么Firefox会在CSS形状下面显示阴影？

回答

相关问题