title: Anti-aliasing on CSS shapes in Firefox
body: <p>In Firefox, a triangle has jagged/aliased edges, whether rotated or not.</p>
  
  <p><a href="http://jsfiddle.net/eaz9mo6m/2/" rel="nofollow noreferrer">See fiddle</a>:</p>
  
  <p><strong>CSS</strong> (html is just <code>&lt;div&gt;&lt;/div&gt;</code>)</p>
  
  <pre><code>div {
      border-top: 10px solid rgba(255, 255, 255, 0);
      border-right: 70px solid #777;
      border-bottom: 10px solid rgba(255, 255, 255, 0);
      transform: rotate(90deg);
  }
  </code></pre>
  
  <p>For shapes that fill their box, you can apply <code>outline: 1px solid transparent</code>.</p>
  
  <p>For unrotated shapes, you can simply apply <code>transform: scale(.999)</code> (found <a href="https://stackoverflow.com/questions/7394872/how-do-i-make-a-css-triangle-with-smooth-edges">on SO</a>).</p>
  
  <p>But if I change the last line of CSS to <code>transform: rotate(90deg) scale(.999)</code>, aliasing still occurs. </p>
  
  <p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=767622" rel="nofollow noreferrer">This bug</a>, filed back in '12 and still marked as "new," is somewhat related, and no attempt at a solution has been made.</p>
  
  <p>Are there any other hacky workarounds to get smooth rotated triangles in Firefox? Getting rid of the hairline down the middle would be a plus.</p>