Problema di confine strano con Firefox

Question

Sto cercando di creare una forma di stile triangolare con CSS, ma sul bordo appare una linea scura come puoi vedere di seguito. Viene visualizzato solo in Firefox, non in Chrome o IE.

Che cosa sta causando questo e come questo può essere fisso?

Ecco il mio codice:

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

provare a cambiare:

border-color: transparent transparent yellow transparent; 

a

border-color: transparent #FFF yellow transparent; 

Aggiornato jsFiddle

Answer 2

prova: border-style: solido punteggiata

Answer 3

è possibile dichiarare quel lato bordo frastagliato come border-style:inset e lo cancella in firefox. semplicemente cambiare gli stili da:

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

a

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

lavori per me in ff19 e Chrome versione 26.0.1410.12 dev-m su Windows 7