Wednesday, March 4th, 2009
Using Polygonal CSS for imageless tooltips and more
Category: CSS
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:
CSS:
which gives you:
The team then takes us from here to a full tooltip example.
Related Content:
4.1 rating from 50 votes
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.
Hmm, Is there a way to create circles by this method?
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!
@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.
@jbaker – you could have a square surrounded by lots of polygons to build a circle. Although the markup for this would be very cumbersome
I seem to recall that IE6 doesn’t support transparent borders?
@Jordan1
You are right, IE up to version 6.x doesn’t support transparent borders: http://reference.sitepoint.com/css/border-color
@fredclown: thanx very much!
for a number of years i’ve used Apple’s layer-based showPopup() function with good cross-browser success.
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/