Anti-aliasing on CSS shapes in Firefox

Question

In Firefox, a triangle has jagged/aliased edges, whether rotated or not.

See fiddle:

CSS (html is just <div></div>)

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);
}

For shapes that fill their box, you can apply outline: 1px solid transparent.

For unrotated shapes, you can simply apply transform: scale(.999) (found on SO).

But if I change the last line of CSS to transform: rotate(90deg) scale(.999), aliasing still occurs.

This bug, filed back in '12 and still marked as "new," is somewhat related, and no attempt at a solution has been made.

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.

Answer 1

Changing the border-style of border-right to outset worked for me on Firefox 32.0.3, also add height: 0; and width: 0; to remove the hairline.

div {
  height: 0;
  width: 0;      
  border-top: 10px solid rgba(255, 255, 255, 0);
  border-right: 70px outset #777;
  border-bottom: 10px solid rgba(255, 255, 255, 0);
  transform: rotate(90deg);
  margin:40px;
}

<div></div>

If you only want to use the triangle in 'fixed rotated' positions you can take a look at this website:

http://apps.eky.hk/css-triangle-generator/

div {
  width: 0;
  height: 0;
  border-style: inset;
  border-width: 70px 10px 0 10px;
  border-color: #777777 transparent transparent transparent;
}

<div></div>