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

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? — Bojangles
– Bojangles, Commented Sep 12, 2011 at 22:45
Strange, FF6 and Chrome 13 render it with smooth edges, and both IE8 and Safari 5.1 render jagged edges. OS=Win XP SP3. — fvu
– fvu, Commented Sep 12, 2011 at 22:48
Firefox 6.0.2 and Chrome 13 (OS X), IE8 (Windows XP) are jagged for me. (Windows in Parallels emulation.) — kirkaracha
– kirkaracha, Commented Sep 12, 2011 at 23:08
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) — JaffaTheCake
– JaffaTheCake, Commented Oct 25, 2012 at 11:58

Caner Şahin · Accepted Answer · 2014-01-10 08:15:32Z

55

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.

answered Jan 10, 2014 at 8:15

Caner Şahin

5781 gold badge4 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Erin Drummond Over a year ago

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

Caner Şahin Over a year ago

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

Erin Drummond Over a year ago

@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

vsync Over a year ago

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

TheCarver Over a year ago

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

|

unclenorton · Accepted Answer · 2012-03-30 14:54:22Z

29

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

answered Mar 30, 2012 at 14:54

unclenorton

1,63511 silver badges19 bronze badges

4 Comments

trizz Over a year ago

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

JohnC Over a year ago

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

Erin Drummond Over a year ago

Doing rotate(360deg) as suggested by @JohnC 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

Gurnard Over a year ago

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

iamjustcoder · Accepted Answer · 2012-02-03 18:05:38Z

19

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

edited Feb 3, 2012 at 18:05

answered Feb 3, 2012 at 17:56

iamjustcoder

4,88210 gold badges35 silver badges48 bronze badges

4 Comments

Jason Lewis Over a year ago

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

TheCarver Over a year ago

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

TheCarver Over a year ago

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

Joe's Ideas Over a year ago

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

kcmr · Accepted Answer · 2014-05-29 17:53:26Z

13

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;

answered May 29, 2014 at 17:53

kcmr

3233 silver badges8 bronze badges

Comments

Sascha Michael Trinkaus · Accepted Answer · 2013-07-29 11:42:56Z

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!

Mohsen · Accepted Answer · 2011-09-12 23:34:21Z

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.

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

tobymackenzie · Accepted Answer · 2015-06-23 23:50:31Z

1

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

answered Jun 23, 2015 at 23:50

tobymackenzie

8187 silver badges14 bronze badges

Comments

Don · Accepted Answer · 2014-08-20 17:02:48Z

0

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.

answered Aug 20, 2014 at 17:02

Don

253 bronze badges

Collectives™ on Stack Overflow

How do I make a CSS triangle with smooth edges?

8 Answers 8

6 Comments

4 Comments

4 Comments

Comments

Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

6 Comments

4 Comments

4 Comments

Comments

Comments

1 Comment

Comments

Comments

Linked

Related