Firefox 中基于旋转边框的三角形渲染

Question

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

这是一个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);
}

Answer 1

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

添加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>

Firefox 中基于旋转边框的三角形渲染

Rotated border based triangle rendering in firefox

css

firefox

rendering