How do I make a CSS triangle with smooth edges?

Question

I have a triangle (JSFiddle) using this CSS:

.triangle {     width: 0;     height: 0;     border-top: 0;     border-bottom: 30px solid #666699;     border-left: 20px solid transparent;      border-right: 20px solid transparent;     } 

And this HTML:

<div class="triangle"></div> 

This makes a triangle, but the diagonal lines are jagged and pixelated. How can I make them smooth? (I was able to smooth them out in Safari and Chrome by making them dotted, but that broke the triangles in Firefox and IE.)

Answer 1

For Firefox you can add -moz-transform: scale(.9999); to make smooth edges. In your case:

.triangle {     width: 0;     height: 0;     border-top: 0;     border-bottom: 30px solid #666699;     border-left: 20px solid transparent;      border-right: 20px solid transparent;     -moz-transform: scale(.9999); } 

Will do the trick.

Answer 2

I have just stumbled upon the same problem, and figured out this trick (at least, it works on a Mac):

-webkit-transform: rotate(0.05deg); -moz-transform: scale(1.1); -o-transform: rotate(0.05deg); /* Didn't check Opera yet */ transform: rotate(0.05deg);