html - Firefox の奇妙な境界線の問題

Question

CSSで三角形のような形を作ろうとしているのですが、下図のように境界線に黒い線が表示されます。Chrome や IE ではなく、Firefox でのみ表示されます。

これを引き起こしている原因と、これを修正する方法を教えてください。

これが私のコードです：

HTML:

<div>
    <h1>Hello</h1>
</div>

CSS:

div{
    margin: 20px;

}
h1{
    background: yellow;
    padding: 30px;  
    position: relative;
    color: #FFFFFF;
    float: left;
    margin-right: 20px;  
}

h1:before{
    position: absolute;
    left: 100%;
    top: 0;
    content: "";
    border: 20px solid yellow;
    border-width: 0px 50px 80px 0px;
    border-color: transparent transparent yellow transparent;
}

JSFiddle: http://jsfiddle.net/TrQEH/

Answer 1

変更してみてください：

border-color: transparent transparent yellow transparent;

に

border-color: transparent #FFF yellow transparent;

jsFiddleを更新しました

Answer 2

そのあいまいな境界側を として宣言するとborder-style:inset、Firefox でクリアされます。スタイルを次のように変更するだけです。

border: 20px solid yellow;  
border-width: 0px 50px 80px 0px;  
border-color: transparent transparent yellow transparent;</code>  

に

border-style:solid inset solid solid;  
border-width: 0px 50px 80px 0px;  
border-color: transparent transparent yellow transparent;

Windows 7のff19およびchromeバージョン26.0.1410.12 dev-mで動作します

Answer 3

試してみてください：ボーダースタイル：点線の実線