CSS Triangle

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

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

8 Responses

1. Jessi Hance says:

   10/06/2009 at 3:09 pm

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

   Reply
2. TeMc says:

   10/06/2009 at 3:37 pm

   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 says:

     10/06/2009 at 3:45 pm

     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!

     Reply
3. Ben says:

   10/08/2009 at 2:12 pm

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

   Reply
4. Sir Emeth Mimetes says:

   10/12/2009 at 5:42 am

   Can you turn it?

   Reply
5. 40a says:

   03/24/2010 at 10:15 am

   div {
      height:0px;
      width:0px;
      border-top:100px dashed transparent;
      border-right:100px solid #955;
   }

   http://www.cssplay.co.uk/menu/flag

   Reply
6. Otto says:

   08/13/2010 at 8:27 am

   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
7. Ryan says:

   08/30/2010 at 6:30 pm

   Anyone know why this looks like crap in webkit?

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

   Reply