Странная проблема с границей с Firefox

Question

Я пытаюсь создать форму треугольника с помощью CSS, но на границе появляется темная линия, как вы можете видеть ниже. Он отображается только в Firefox, а не в Chrome или IE.

Что является причиной этого и как это можно исправить?

Вот мой код:

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

попробовать: границы стиля: твердый пунктир

Answer 3

Вы можете объявить, что нечеткое сторону границы, как 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; 

работает для меня в ff19 и хромированной версии 26.0.1410.12 Dev-м на окнах 7