Code Snippet

Home » Code Snippets » CSS » CSS Triangle

CSS Triangle

HTML

You can make them with a single div. It's nice to have classes for each direction possibility.

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

CSS

The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle.

.arrow-up {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;

	border-bottom: 5px solid black;
}

.arrow-down {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;

	border-top: 20px solid #f00;
}

.arrow-right {
	width: 0;
	height: 0;
	border-top: 60px solid transparent;
	border-bottom: 60px solid transparent;

	border-left: 60px solid green;
}

.arrow-left {
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 

	border-right:10px solid blue;
}

Examples

Subscribe to The Thread

Jessi Hance

10/06/2009

Trippy! I can’t get my head around it!

Reply ↓
TeMc

10/06/2009

It’s basicly like a giant 3D border-corner. (when the left and top border-color are different the edge is diagonal, that’s being used to make this triangle).

Reply ↓
- Jessi Hance
  
  10/06/2009
  
  Thanks, TeMc, now it all makes sense.
  
  By the way, it’s fun to play with the inner div’s right border width, and change the shape and size of the triangle!
Ben

10/08/2009

Clever. I like seeing CSS doing things it shouldn’t

Reply ↓
Sir Emeth Mimetes

10/12/2009

Can you turn it?

Reply ↓
40a

03/24/2010
```
div {
   height:0px;
   width:0px;
   border-top:100px dashed transparent;
   border-right:100px solid #955;
}
```
http://www.cssplay.co.uk/menu/flag

Reply ↓
- Flaviu
  
  03/14/2011
  
  Wow, nice job with the flag on your link…
  
  Also, I wanted to ask why do you use ‘dashed’ instead of ‘solid’? I wasn’t able to understand the difference..
  
  Cheers & congrats again.
- inquisitive_web_developer
  
  05/11/2011
  
  Wow! Sweet!

Otto

08/13/2010

Here’s one I use a fair amount for various things:

<style>
.left-arrow {
	border-color: transparent black;
	border-style: solid;
	border-width: 20px 20px 20px 0px;
	height: 0px;
	width: 0px;
}

.right-arrow {
	border-color: transparent black;
	border-style: solid;
	border-width: 20px 0px 20px 20px;
	height: 0px;
	width: 0px;
}

.down-arrow {
	border-color: black transparent;
	border-style: solid;
	border-width: 20px 20px 0px 20px;
	height: 0px;
	width: 0px;
}

.up-arrow {
	border-color: black transparent;
	border-style: solid;
	border-width: 0px 20px 20px 20px;
	height: 0px;
	width: 0px;
}
</style>

<div class="left-arrow"></div>
<div class="right-arrow"></div>
<div class="down-arrow"></div>
<div class="up-arrow"></div>

You can play with the border sizes to get various depths and such.

Reply ↓

Ryan

08/30/2010

Anyone know why this looks like crap in webkit?

http://img825.imageshack.us/img825/3002/screenshot20100830at827.png

Reply ↓
- Derek
  
  07/29/2011
  
  Maybe webkit can’t draw it the right way?
- David
  
  02/17/2012
  
  If the dimensions of the triangle aren’t symmetrical, you tend to get those jagged lines. It appears to be more noticeable in Webkit, for some reason–not sure why.
Tim

09/14/2010

Like it. Thanks.

Reply ↓
davyne

10/18/2010

Cool trick, I tried it first after seeing it elsewhere.
Then I came across the ivy-leaf trick on this website, and if you want the triangle to scale with the text, change the ivy leaf to a triangle.

down: \25bc
up: \25b2
right: \25b6

I couldn’t find a “map”, but if you play around changing the last 4 digits in the url, you can find all kinds of cool stuff.
http://www.decodeunicode.org/en/u+25bc

Reply ↓
Micky

11/04/2010

Haha, funny trick.

Reply ↓
Rushabh Vasa

03/06/2011

This is amazing!! Thanks for sharing..

Reply ↓
Justin

04/04/2011

Thanks,

This is just want I was looking for :)

Reply ↓
Soony

07/27/2011

Now perfect in IE

Reply ↓
Derek

07/29/2011

You can use those triangles to create Real-time 3D objects in IE6. Yes, IE6!
http://www.uselesspickles.com/triangles/

Borders can also build a house:
http://www.designdetector.com/tips/3DBorderDemo2.html

Reply ↓
Ted

08/15/2011

I noticed a small issue with this technique in Firefox 5.0 (Win). FF 5.0 renders a light stroke on the front sides of the triangle. Here’s a link to a jsFiddle that replicates the issue:

http://jsfiddle.net/brightlight/4DmFk/

Obviously, you’ll need to view that in FF 5.0 (Win) to see what I’m talking about.

Reply ↓
- Ted
  
  08/17/2011
  
  Update: Changing the border style to “inset” on the transparent sides of the element seems to fix this issue in Firefox 5 and 6. Other browsers continue to render the triangles fine even after this border-style adjustment.
- Matt Ruby
  
  01/24/2012
  
  Thanks for the inset tip! I’ve been trying to eliminate that thin stroke for a day!!
Christo

08/25/2011

In scenarios like below I get pixelation in Safari, IE and some yet less in FF. Is anyone else getting this ?

.point_bottom { border-left: 200px solid transparent; border-right: 200px solid transparent; border-top: 80px solid #FF0000; bottom: 0; height: 0; left: -101px; position: absolute; width: 0; }

Reply ↓
- David
  
  02/17/2012
  
  If the triangle is not symmetrical, it won’t look smooth. Basically, it’s like trying to draw a straight line at a 30-degree angle in a bitmap image. The line will always look a little jagged.
  
  This trick is just an exploitation of CSS behavior–I don’t believe CSS was intended to do this sort of thing. If you want truly straight lines at whatever angle, you might want to explore SVG.
Damir

09/08/2011

Now how about a nice way to add a drop shadow to the triangle? Would be so awesome…

Reply ↓
- Sara
  
  09/09/2011
  
  You do some limited drop shadows using a pseudo-element. Just position it a little different than the original triangle shape and then change the color and/or transparency. A little rotation looks nice with this effect, too. I saw it in a NetTuts piece recently.
Iestyn

09/10/2011

Is it possible to use this on a [submit] button?
so the end result would look like this https://skitch.com/iestynx/fa6et/artwork

I’m a bit new to this so sorry if it’s a stupid question.

Thanks

Reply ↓
- S.M.Karthick
  
  01/09/2012
  
  Lestyn,
  
  I guess the button can’t be achieved using a div.I tried creating the same using two div and i got the same.
  
  Here’s my Try
  
  http://jsfiddle.net/smkarthick/vb5Tv/3/
Chris Morgan

09/12/2011

The problem that some people have been reporting with inaccurate edges is to do with antialiasing and the fact that transparent is equivalent to rgba(0, 0, 0, 0)—transparent black. When combined with antialiasing, this produces a result which is not what the author intended. I am not aware whether any browsers used antialiasing back in mid-2009, but now, Firefox distinctly does.

I am in the process of writing a blog post (as part of starting a blog, which makes it take longer…) dealing with this particular subject with full details, explanations, the caveats, et cetera, and I initially planned on waiting till I had that done before posting this. But as it’s been several weeks since I began to plan it and will probably be at least as many more until it’s ready and posted, I figured I should try to stop people using transparent when they don’t mean it before it’s too too late.

My general recommendation is to avoid using transparent unless you know that it’s suitable (i.e. black is the touching colour). If you have to care about browsers that don’t support rgba() values (IE8 and earlier), then specify it as transparent and add a border-left/right/top/bottom-color value after it with the correct rgba value to override it and make it correct.

Reply ↓
- Andrew Philpott
  
  04/09/2012
  
  I was just playing around with the antialiasing issue and found that if I set the border widths to make the triangle symmetrical and then do a scale transform to the triangle to stretch it to the right dimensions, it forces the browser to antialias the edges and gets rid of the jaggedness.
Saurabh

09/13/2011

Hi,
Triangle design problem in ie9

Reply ↓
jefferis peterson

09/15/2011

Hi Chris, I watched your video on vimeo and you went a mile a minute. I have a love to be able to create angled nav tabs with variable widths for text. I have been attempting to modify a PVII menu set, but have encountered a problem that I’m not sure arrows can solve due to the width of the borders. I can only show you by example the fixed width image based version of the project I’m trying to duplicate in CSS:
http://heavy-construction.us/
Notice the yellow line border on rollover. Now here is the project so far: http://heavy-construction.us/test.html. Using the arrows let me create an angled tab, but the hover loses the yellow border. Right now I’m using a background repeating image gradient for each state of the nav buttons, and I could replace it with a CSS3 gradient fill, but I don’t think anything I’ve seen can create the narrow yellow 45 degree border, unless perhaps 2 triangles overlapping?

Reply ↓
- jefferis peterson
  
  09/15/2011
  
  Gotten a little further using gradient buttons:
  http://heavy-construction.us/test3.html
  
  This is based on the Spry Widget for menus in DW, but for some reason it doesn’t start the gradient at the full left of the menu tab.
  And I’ve not been able to figure out how to at the yellow 45degree border to the hover.
sonal panchal

09/16/2011

Wow, it’s very nice tutorial..

Thank u so much…

Reply ↓
jefferis peterson

09/19/2011

Well, I got it working using a yellow flag instead of an outline edge:
http://heavy-construction.us

Reply ↓
shrey

09/23/2011

good tutorial, your website is great.

Reply ↓
soundarapandian

10/04/2011

This is amazing :)

Reply ↓
Jared Johnson

12/02/2011

Thanks the tutorial! I used this with em sizing to make it work dynamically – check it out!
http://thinkcloud.ly/snippets/tooltips.html

Reply ↓
wendee

12/16/2011

An interesting thing I am noticing in Chrome is that when all arrows are set to the same size, the .arrow-right is 2px taller than the other arrows .

Reply ↓
Lee

01/03/2012

how do you get the text to line up next to the arrow? Thanks!

Reply ↓
Vincent Verbrugh

01/04/2012

This is brilliant! Thanks

Reply ↓
tambo

01/14/2012

div{
height: 0px;
width: 0px;
}

div.left-arrow {
border: 20px solid #fff;
border-right: 20px solid #abc;
border-left:none;
}

div.right-arrow {
border: 20px solid #fff;
border-left: 20px solid #abc;
}

div.down-arrow {
border: 20px solid #fff;
border-top: 20px solid #abc;
border-bottom:none;
}

div.up-arrow {
border: 20px solid #fff;
border-bottom: 20px solid #abc;
border-top:none;
}

from: http://kougiland.com/css-triangle.html

Reply ↓
eky

01/26/2012

Hey guys! I just made a simple generator:
http://apps.eky.hk/css-triangle-generator

Reply ↓
- eXoSaX
  
  04/01/2012
  
  Thanks a lot! Great generator!
James

02/06/2012

Thanks for a great tutorial!

Question: is it possible to assign more than one of these “triangles” to an element? I’m thinking of creating star shapes by assigning multiple border-based triangles to a square div. Will that work or does the :after pseudo-class preclude that?

Reply ↓
Umesh

02/16/2012

How to give auto width ? its taking width of its parent div. I tried all types e.g auto… Is there another trick?

Reply ↓
Bill Turner

02/22/2012

Hello Chris, I must say I really enjoyed the post, even I managed to get it working. Will be sharing this, cheers!

Reply ↓
Waqar Alamgir

03/12/2012

Dude, the buggy Fire Fox is putting a gray border :( didn’t working even using before and after

Tried with white color!
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid #FFF;
}

Reply ↓
- Matt Ruby
  
  03/12/2012
  
  See Ted’s comment above re: inset borders
  That should fix you right up.
file-monger

03/13/2012

Looks great. I am a total newbie to Css at this level. I need to take a fast track to showing a callout with a triangle pointing down or to the left depending on which type of control I assign it to. How do I put this use of triangles together with a rectangulat or rounded-rectangular callout box?
Thanks in advance,
file-monger

Reply ↓
Dan

03/13/2012

if you want to improve how the triangles get rendered on chrome/safari add

-webkit-transform:rotate(360deg);

Reply ↓
Anxiety Self Treatment

04/05/2012

Thanks, this is exactly what I was looking for, works great.

One minor bug I wanted to mention: in the css example it doesn’t list “display: block” as a required def – in the demo this is inherited, but without the proper display setting the arrow gets cut off.

I would recommend adding “display: block” to the css example.

Reply ↓
ardianta

04/07/2012

would you like to see http://www.ardianta.tk/2012/04/css3-membuat-segitiga-atau-triangle.html

Reply ↓
- Hannie
  
  04/13/2012
  
  The arrows on your site are not CSS triangular but image. Did you mean that you want to replace these graphic triangular with CSS triangular?
ardianta

04/17/2012

Yess,, it so Cool.. i can make triangle.. what ever i want..

Reply ↓

Speak, my friend

Notify me of follow-up comments by email.

Notify me of new posts by email.

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:

You can use basic HTML
When posting code, please turn all
< characters into <
If the code is multi-line, use
<pre><code></code></pre>

Code Snippet

CSS Triangle

HTML

CSS

Examples

Subscribe to The Thread

Speak, my friend

Posting tips:

Thank you,
~ The Management ~

DigWP

Quotes on Design

HTML-Ipsum

Bookshelf

Code Snippet

CSS Triangle

HTML

CSS

Examples

Subscribe to The Thread

Speak, my friend

Posting tips:

Thank you,~ The Management ~

DigWP

Quotes on Design

HTML-Ipsum

Bookshelf

Thank you,
~ The Management ~