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

Withers

I'm using FF6 at the moment, and it's nice and smooth (anti-aliased) here. IE renders things very badly all over the place, so this doesn't surprise me. What version of FF are you using? – Beghard

Strange, FF6 and Chrome 13 render it with smooth edges, and both IE8 and Safari 5.1 render jagged edges. OS=Win XP SP3. – Allow

Firefox 6.0.2 and Chrome 13 (OS X), IE8 (Windows XP) are jagged for me. (Windows in Parallels emulation.) – Withers

I think this question has become out of date - corners are anti-aliased by default in webkit, and 'dotted' fixes it in Firefox jsbin.com/opusan/1/edit (and ticket in Firefox bugzilla.mozilla.org/show_bug.cgi?id=805393) – Theurgy

Answer 1

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

Unwonted

rgba will remove those annoying extra borders Firefox seems to put on these days as well. – Syzygy

Firefox 36 now and I still have pixelated edges, even with this code. But, it's always on unequal-sided triangles, not equal. – Stealage

I add the following to make the smooth edges on unequal triangles: -moz-transform: scale(.9999);. – Stealage

Should mark answer about -moz-transform: scale(.9999) as correct answer, that's what works – Carlist

Answer 2

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.

Tribrach

This works but on my computer anyway it made the lines look "too smooth", ie a bit blurry as compared to the rotate(0.01deg) method – Returnable

@ErinDrummond which browser and version you have tried with? My answer will only work with Firefox though as I implied. I have checked rotate(0.01) with Firefox (32.0.3) for Mac and it didn't get me a smooth line. – Halftone

@CanerŞahin I was using Firefox 32.something on Linux (Fedora 20). The jagged edge problem doesn't even occur at all for me on Firefox for Mac (32.0.3), no workarounds required – Returnable

Firefox has no problem, it's Chrome which has. – Muriah

For me on FF36, I still get rough edges. Using -moz-transform: scale(.9999); does work for me. – Stealage

I was digging this for Chrome (41.0.2272.118 m says about). Diagonal lines (from borders) were jagged, scale and rotate does the magic, yet, it's true that rotate makes a best result - clear non blurry and non jagged lines – Teenateenage

Answer 3

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

Tamekia

I've added only -webkit-transform: rotate(0.01deg); to my CSS and that works perfectly for both Webkit on Windows and Mac (Chrome on Win, Safari on OSX) Other browsers (at least on Windows) shows the triangle perfectly smoothed, except Opera. Didn't fixed that one yet... – Hubbs

I'd suggest doing a 360deg rotate so that the triangle is in the same position transform: rotate(360deg); – Amazing

Doing rotate(360deg) as suggested by @Amazing doesnt work precisely because it puts the triangle in the same position - rotating by 0.01deg shifts it slightly enough to have antialiasing applied but not enough for a human to be able to tell its been rotated – Returnable

My issue was with Chrome (40) Firefox was fine this fixed did it for me and good suggestion to use 360 deg, thanks all – Oldtimer

Answer 4

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;

Rutan

Answer 5

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!

Chitarrone

Answer 6

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.

Accouplement

IE8 is never going to support canvas natively, you have to use IE9 for that. – Kuehn

Answer 7

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

Coleslaw

Answer 8

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.

Hsinking