4

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.

Community
  • 1
  • 1
willlma
  • 7,353
  • 2
  • 30
  • 45

3 Answers3

5

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>
Nick Russler
  • 4,608
  • 6
  • 51
  • 88
3

JS Fiddle

if you use border:dotted it fixes the issue and add width:0 and height:0 to remove 1px space from the middle

div {
    width: 0;
    height: 0;
    border-style: dotted solid dotted solid;
    border-color: transparent transparent transparent #777777;
    border-width: 10px 0 10px 70px;
    transform: rotate(-90deg);
    margin:40px;
}

reference : http://blog.dustinboersma.com/post/45768836072/fixing-osx-firefox-border-triangle-pixelation

Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
  • Your fiddle does not make a triangle but a circle for me, i workes with `border-right: 70px outset #777;` though: http://jsfiddle.net/eaz9mo6m/9/ – Nick Russler Oct 14 '14 at 10:43
  • Very weird, your code seems to work in chrome but is broken for Firefox 32.0.3 (screenshot: http://i.imgur.com/I4nX8Od.png?1), but the code from the referenced blog works.. – Nick Russler Oct 14 '14 at 12:16
0

This seems to work better in Firefox, but Chrome is a bit jagged. If width and height are equal you can control the triangle with transforms pretty easily:

div {
    width:100px;
    height:100px;
    margin:0 auto;    
    background: linear-gradient(-45deg, #777 50%, #fff 50%);
    transform: translate(0,100px) rotate(-135deg) skew(35deg,35deg);
}
Jon Packman
  • 26
  • 2