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

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 ~