Wednesday, March 4th, 2009

Using Polygonal CSS for imageless tooltips and more

Category: CSS

The Filament Group has written up a great article on using polygonal CSS for image free tooltips with pointers.

This means building the following without any images:

This harkens back to Tantek’s work on polygons and shows how you can build them:

Polygonal CSS works by setting an element’s width to something small and then setting thick borders on less than 4 sides. To make a triangle shape, 2 of those borders have to have transparent color, essentially masking out the one visible border at an angle in attempt to connect corners.

The concept is easiest explained through a code sample. The following CSS will style a div into a red triangle:

  1. div {
  2.     width:0;
  3.     height:0;
  4.     border-left: 20px solid transparent;
  5.     border-right: 20px solid transparent;
  6.     border-top: 30px solid red;
  7.     border-bottom: 0;
  8. }

which gives you:

The team then takes us from here to a full tooltip example.

Posted by Dion Almaer at 3:57 am
10 Comments

++++-
4 rating from 55 votes

10 Comments »

Comments feed TrackBack URI

Very cool but the tradeoff with CSS only is that you’ll have to look at pixelated lines in IE.

This one is done in entirely in canvas/vml making the pointer and corners come out much better http://www.lullabot.com/articles/announcing-beautytips-jquery-tooltip-plugin I get the idea of styling through CSS only but some things just come out better with a different approach. Any UI framework that tries to push the limits shouldn’t stick with just CSS.

Comment by Jadet — March 4, 2009

Hmm, Is there a way to create circles by this method?

Comment by jbaker — March 4, 2009

can i find anywhere an explanation of _why_ this is the case. is it a css implementation bug or how can the result be explained?

thanx!

Comment by aurora — March 4, 2009

@aurora

Borders in CSS meet at an angle. Thus, if you give the top, bottom, and left borders transparency, and give the right border a color and set the height and width to bigger than the width of the border you will get a trapazoid. As you shrink the height/width the left side of the trapazoid will shrink till it is a point …. giving you a triangle.

Comment by fredclown — March 4, 2009

@jbaker – you could have a square surrounded by lots of polygons to build a circle. Although the markup for this would be very cumbersome

Comment by WillPeavy — March 4, 2009

I seem to recall that IE6 doesn’t support transparent borders?

Comment by Jordan1 — March 4, 2009

@Jordan1
You are right, IE up to version 6.x doesn’t support transparent borders: http://reference.sitepoint.com/css/border-color

Comment by MatthiasZeis — March 5, 2009

@fredclown: thanx very much!

Comment by aurora — March 5, 2009

for a number of years i’ve used Apple’s layer-based showPopup() function with good cross-browser success.

Comment by fierybones — March 8, 2009

In IE6 you can implement transparent borders by using a chroma filter.

See http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/

Comment by morrisj — March 10, 2009

Leave a comment

You must be logged in to post a comment.