Merkwürdiges Randproblem mit Firefox

Question

Ich versuche, Dreiecksform mit CSS zu erstellen, aber dort erscheint eine dunkle Linie auf dem Rand, wie Sie unten sehen können. Es erscheint nur in Firefox, nicht in Chrome oder IE.

Was kann das und wie dies fixiert werden verursacht?

Hier ist mein Code:

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

versuchen zu ändern:

border-color: transparent transparent yellow transparent; 

zu

border-color: transparent #FFF yellow transparent; 

Aktualisiert jsFiddle

Answer 2

try: border-style: solid

Answer 3

punktiert Sie können diese Fuzzy-Grenze Seite als border-style:inset und es erklären räumt es in Firefox auf. ändern Sie einfach Ihre Stile von:

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

zu

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

Werke für mich in FF19 und Chrom Version 26.0.1410.12 dev-m auf windows 7