title: Rotated border based triangle rendering in firefox
body: <p>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?</p>
  
  <p><img src="https://i.stack.imgur.com/kVmLq.png" alt="enter image description here"></p>
  
  <p>Here's a <a href="https://jsfiddle.net/uausv85h/2/" rel="noreferrer">fiddle</a>.</p>
  
  <pre><code>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);
  }
  </code></pre>