Search code examples
cssgeometrycss-transformsantialiasingcss-shapes

Anti-aliasing on CSS shapes in Firefox


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.


Solution

  • 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>