在firefox中旋转基于边框的三角形呈现

When I make a css triangle it's all good, but when I rotate it a strange line appears in the middle. Why is this?

当我做一个css三角形时，一切都很好，但是当我旋转它时，中间会出现一条奇怪的线。这是为什么呢?

Here's a fiddle.

这是一个小提琴。

div {
    position:absolute;
    top:100px;
    width:0; 
    height:0; 
    border:100px solid rgba(0,0,0,0); 
    border-top-color:#333;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg);
}

1 个解决方案

#1

its bug - https://bugzilla.mozilla.org/show_bug.cgi?id=818109

它的错误——https://bugzilla.mozilla.org/show_bug.cgi?id=818109

add translate3d( 0, 0, 1px)

添加translate3d(0,0, 1px)

div {
    position:absolute;
    top: 100px;
    width: 0; 
    height: 0; 
    border: 100px solid rgba(0,0,0,0); 
    border-top-color: #333;
    -webkit-transform: rotate(45deg) translate3d( 0, 0, 1px);
    -moz-transform: rotate(45deg) translate3d( 0, 0, 1px);
    transform: rotate(45deg) translate3d( 0, 0, 1px);        
}

<div></div>