Robertdot, A Web Design Blog » Tricks http://robertdot.org A web design blog for designers that develop or developers that design. Fri, 05 Mar 2010 15:59:57 +0000 http://wordpress.org/?v=2.8 en hourly 1 Triangles in CSS http://robertdot.org/2009/03/25/triangles-in-css/ http://robertdot.org/2009/03/25/triangles-in-css/#comments Wed, 25 Mar 2009 17:46:52 +0000 Robert http://robertdot.org/?p=179 I was reading Image-free CSS Tooltip Pointers and realized the trick of triangles in CSS. These odd little polygonal things have been around for awhile, but I just now figured out how the triangle works.

Basically, where two borders meet (e.g. border-top and border-left), a diagonal line is drawn where they meet, making a neat bezel effect, rather than having the top border sit above the left border. For example:

On the div above, you can see the diagonal lines where the borders meet. 

1

<div style="margin: auto; border: 10px solid red; border-left-color: blue; border-right-color: green; border-bottom-color: yellow; height: 20px; width: 20px; background: gray;"></div>

Taking advantage of this, it’s easy to set the color of some borders to transparent and end up with a polygon. 

1

<div style="margin: auto; border: 10px solid red; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; height: 20px; width: 20px;"></div>

Take that principle and mess around with it, and you can make triangles. For example:

Above, you have north, south, east, west, northeast, northwest, southeast, and southwest (in no particular order). 

1
2
3
4
5
6
7
8
9
10

 <div style="position: relative; width: 100px; height: 100px; margin: auto;">
  <div style="width:0; height:0; border-left: 5px solid transparent;  border-right: 5px solid transparent; border-top: 5px solid blue; border-bottom: 0; position: absolute; bottom: 0px; left: 50%;"></div> 
  <div style="width:0; height:0; border-left: 5px solid transparent;  border-right: 5px solid transparent; border-bottom: 5px solid blue; border-top: 0; position: absolute; top: 0px; left: 50%;"></div> 
  <div style="width:0; height:0; border-top: 5px solid transparent;  border-bottom: 5px solid transparent; border-right: 5px solid blue; border-left: 0; position: absolute; top: 50%; left: 0px;"></div> 
  <div style="width:0; height:0; border-top: 5px solid transparent;  border-bottom: 5px solid transparent; border-left: 5px solid blue; border-right: 0; position: absolute; top: 50%; right: 0px;""></div> 
  <div style="width:0; height:0; border-left: 7px solid blue;  border-right: 7px solid transparent; border-top: 7px solid transparent; border-bottom: 0; position: absolute; bottom: 0px; left: 0px;""></div> 
  <div style="width:0; height:0; border-left: 7px solid blue;  border-right: 7px solid transparent; border-bottom: 7px solid transparent; border-top: 0; position: absolute; top: 0px; left: 0px;""></div> 
  <div style="width:0; height:0; border-left: 7px solid transparent;  border-right: 7px solid blue; border-bottom: 7px solid transparent; border-top: 0; position: absolute; top: 0px; right: 0px;""></div> 
  <div style="width:0; height:0; border-left: 7px solid transparent;  border-right: 7px solid blue; border-top: 7px solid transparent; border-bottom: 0; position: absolute; bottom: 0px; right: 0px;""></div> 
 </div>

So, as you can see, it’s pretty easy to make a triangle. Adjust the border widths to make them bigger.

]]> http://robertdot.org/2009/03/25/triangles-in-css/feed/ 0