1

http://css-tricks.com/examples/ShapesOfCSS/に示されているように、自分のWebサイトで三角形を使用しています。

悲しいことに、これは少し伸ばされたときにブラウザ間で正しく表示されません。

私のコード

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 に答える