Comments on: Using Polygonal CSS for imageless tooltips and more

By: morrisj

morrisj — Tue, 10 Mar 2009 06:15:06 +0000

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/

By: fierybones

fierybones — Sun, 08 Mar 2009 13:22:45 +0000

Apple showPopup() article

By: fierybones

fierybones — Sun, 08 Mar 2009 13:20:33 +0000

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

By: aurora

aurora — Thu, 05 Mar 2009 07:46:33 +0000

@fredclown: thanx very much!

By: MatthiasZeis

MatthiasZeis — Thu, 05 Mar 2009 07:01:04 +0000

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

By: Jordan1

Jordan1 — Wed, 04 Mar 2009 23:52:26 +0000

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

By: WillPeavy

WillPeavy — Wed, 04 Mar 2009 19:18:50 +0000

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

By: fredclown

fredclown — Wed, 04 Mar 2009 16:40:06 +0000

@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.

By: aurora

aurora — Wed, 04 Mar 2009 13:55:39 +0000

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!

By: jbaker

jbaker — Wed, 04 Mar 2009 11:51:03 +0000

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

By: Jadet

Jadet — Wed, 04 Mar 2009 09:53:53 +0000

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.