1

我在我的网站上使用了一个三角形，如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 在形状下方产生一些较暗的线条。为什么会这样，我可以摆脱它吗？

4

2 回答 2

4

不是阴影，是颜色，是因为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）

于 2012-11-27T10:23:13.557 回答
2

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

例如：

border-left: 55px solid rgba(255,255,255,0);
border-right: 55px solid rgba(255,255,255,0);
于 2012-11-27T10:28:26.387 回答