为什么火狐浏览器在我的CSS形状下面显示阴影

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/

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

Answer 1

这不是阴影，而是颜色，这是因为颜色border-left, border-right

演示

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

宽度背景色

几个例子：CSS三角形自定义边框颜色

正如@Aleks Dorohovich 所说，您可以使用 rgba（） CSS3 属性并使边框不透明，但是（注意：不适用于 <= IE8）

Answer 2

尝试将透明属性更改为不透明度为 0 的 rgba（英语：rgba

）

例如：

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