html - Firefox 的奇怪边框问题

Question

我正在尝试使用 CSS 创建三 Angular 形样式的形状，但边框上出现了一条黑线，如下所示。它只出现在 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