Question

我在我的网站上使用了一个三角形，如http://css-tricks.com/examples/ShapesOfCSS/

所示

可悲的是，当浏览一下时，这在浏览器中无法正确显示。

我的代码

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/

使firefox在形状下方产生一些较暗的线条。为什么会这样，我能摆脱它吗？

Answer 1

它不是阴影，它是颜色，而是因为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属性并使边框不透明但是（注意：不能用于＆lt; = IE8）

Answer 2

尝试将透明属性更改为 rgba ，且不透明度为0

例如：

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

为什么firefox在我的CSS形状下面显示阴影？

2 个答案: