CSS Triangles

CSS Triangles

CSS TrianglesI was recently redesigning my website and wanted to create tooltips.  Making that was easy but I also wanted my tooltips to feature the a triangular pointer.  I’m a disaster when it comes to images and the prospect of needing to make an image for every color tooltip I wanted made me rethink my redesign.  Lucky for me, MooTools Core Developer Darren Waddell shared with me a great trick:  CSS triangles.  Using pure CSS you can create cross-browser compatible triangles with very little code!

The CSS

copy/* create an arrow that points up */
div.arrow-up {
  width:0px; 
  height:0px; 
  border-left:5px solid transparent;  /* left arrow slant */
  border-right:5px solid transparent; /* right arrow slant */
  border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

/* create an arrow that points down */
div.arrow-down {
  width:0px; 
  height:0px; 
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid #2f2f2f;
  font-size:0px;
  line-height:0px;
}

/* create an arrow that points left */
div.arrow-left {
  width:0px; 
  height:0px; 
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-right:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

/* create an arrow that points right */
div.arrow-right {
  width:0px; 
  height:0px; 
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-left:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

The secret to these triangles is creating giant borders to the two perpendicular sides of the direction you’d like the triangle to point. Make the opposite side’s border the same size with the background color of whatever color you’d like the tooltip to be.  The larger the border, the larger the triangle.  You can color your triangles any color, any size, and in any direction. The best part is that there’s very little code needed to achieve this effect.

I don’t know how I didn’t know about this technique sooner!  This neat trick will surely help me in the future and opens up a world of possibilities for me to improve existing tooltip elements.

http://davidwalsh.name/css-triangles

Advertisements
By Rz Rasel Posted in Css

2 comments on “CSS Triangles

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s