Strange border issue with Firefox

Question

I am trying to create triangle style shape with CSS, but there a dark line appears on the border as you can see below. It appears in Firefox only, not in the Chrome or IE.

What is causing this and how this can be fixed?

Here's my 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

try changing:

border-color: transparent transparent yellow transparent;

to

border-color: transparent #FFF yellow transparent;

Updated jsFiddle