css - Firefox 中基于旋转边框的三 Angular 形渲染

Question

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



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