How do I make a CSS triangle with smooth edges?

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 ma开发者_Python百科king them dotted, but that broke the triangles in Firefox and IE.)

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.

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

Even in pure CSS we can get the smooth diagonals.

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid rgba(255, 255, 255, 0); 
    border-right: 20px solid rgba(255, 255, 255, 0);
}

Instead of giving transparent you can make use of rgba(255, 255, 255, 0). This again gives transparent. But the alpha=0 makes smooth diagonals.

Check the browser support for rgba css-tricks.com/rgba-browser-support

Thanks

Using border style inset for transparent borders gives much better results in Firefox:

border-top: 22px solid $pink;
border-right: 84px inset transparent;
border-left: 84px inset transparent;

What really helped me when first stumbling over this was to scale a uniform triangle by a certain amount. Firefox seems to be particularly 'edgy' with scalene triangles. Interesting though, perfect triangles get rendered without jagged edges. If CSS transforms are possible in your project, just try:

.triangle {
  width: 0;
  height: 0;
  border-top: 0;
  border-bottom: 20px solid #666699;
  border-left: 20px solid transparent; 
  border-right: 20px solid transparent;
  -moz-transform: scaleY(1.5); // optional: replace with Sass/SCSS/LESS mixin
  -moz-transform-origin: top; // optional: replace with mixin, too
}

This fixed the aliasing across the edge for me. JSFiddle here (Mozilla only right now). Hope this helps!

A very hacky way would be using a rotated div

Here I used two divs to show a triangle:

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

and rotated the inner div for two not right sides of triangle:

.triangle{
    position:relative;
    width:100px;
    height:60px;
    border-bottom:1px solid black;
    border-radius:12px;
}
.rot{
    border-radius:10px;
    border-left: 1px solid black;
border-top: 1px solid black;
width:70px; height:70px;
    -webkit-transform:rotate(45deg);
    position:absolute;
    left:15px;
    top:23px;
}

I didn't tried to find the relation between numbers.

Here is the fiddle of the code:

http://jsfiddle.net/mohsen/HTMcF/

BUT I would strongly suggest you to use canvas element for this reason.

For me, using dashed for the transparent borders worked for most browsers that don't automatically smooth them and rotating 360 degrees worked for old Webkit:

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px dashed transparent; 
    border-right: 20px dashed transparent;
    -webkit-transform: rotate(360deg);
}

None of the others worked for me, but I found the following did (by accident):

.triangle {
  border: 1.3rem dashed #666699;
  border-right: .5rem solid rgba(255, 255, 255, 0);
}

The mixture of dashed/solid and the rgba fix worked in FF31, IE11, and Chrome36.