on css triangles
Sometimes you come across a technique which sounds a little icky but holds a lot of potential nonetheless. Usually I file these methods in the back of my head, until I come across a project where they present the most valid option. The css triangle technique is a good example of what I am talking about here. A pretty refreshing idea, but only really practical in very specific circumstances.
finding a use for triangles
Usually background images suffice when visualizing triangles. I actually prefer using an extra wrapper with a background image over some empty elements with a lot of crazy css applied to them, just to create a triangle. In this particular case though, the size of the triangle wasn't fixed and could change depending on the design.
The effect I needed to create was an angular bottom side on several boxes throughout a site. These boxes could vary in width so I needed a flexible solution to create my triangles. I've tried using the image technique before (creating one over-sized image and actually computing the height needed for the opposite side to make the hypotenuse - the side not containing a 90° corner - fit correctly) but that didn't work out too well. Too many rounding errors there, which led to sloppy results.
So I looked around a little and hit Jon Rohan's article on css triangles. A good summary of the technique with all the needed fixes for it to work in all necessary browsers (including ie6!). I tested it myself (better be safe than sorry) and actually got good results in all needed browsers, though the ie6/chroma filter fix needed an extra budge using zoom:1 to kick in.
My idea was to insert html elements into the boxes (using jQuery or whatever), turn them into triangles and position them absolute at the bottom of the containing box, mimicking the effect of an angular bottom side. At first I had some trouble making sure the triangle was as wide as the containing element (border widths can't be 100% apparently) but with a little javascript help all worked out fine. The results in Firefox were actually quite perfect. Up until then, everything was going smoothly, but you know what's coming next, right?
a line isn't just a line
It's a funny thing how running into an issue makes you notice certain things. Firefox rendered the triangles flawlessly, but when checking other browsers it turned out they had way more problems rendering the triangles.
If you look around for articles on the web, you'll notice that almost all examples use triangles with a 90°/45°/45° setup, meaning the width defined on both borders is equal. This ensure that the resulting hypotenuse is drawn under a 45° angle. More specifically, a line drawn like this needs no anti-aliasing to render properly since each next pixel is drawn at +1px/+1px from the previous pixel.
If the hypotenuse is drawn under a different angle, the line will start to look extremely jaggy if no anti-aliasing is applied. When used on top of images or other high contrasting backgrounds, the result is ugly as hell. Seems that apart from Firefox (and apparently Chrome for Windows), no other browsers apply anti-aliasing on the resulting lines between different borders. You can see the final results below:
who's to blame then
In this case it's difficult to actually blame browser vendors. The triangle method is one of those typical examples of creative thinking sprouting from the web community. The triangle effect is really a side effect from wide borders colliding, which hasn't seen much use in the past. Firefox' rendering is of course preferred, should you want to use fat, differently colored borders on a single element in your design. If not done like this, the separation line between both borders will look pretty crappy, but a high priority issue this is not.
So, even though the technique works alright, the application of it is still pretty limited due to rendering issues. Use it in situations where you have a 45° angle or when the background color doesn't differ much from the color of the triangle. Otherwise, you'll have to live with jaggy edges.
conclusion
For those interested to know how we fixed it: we used the html5 canvas and drew some triangles of our own. This was actually easier said than done, but for larger triangles it worked out okay. For smaller triangles though the drawing algorithm we used simply wasn't accurate enough, still resulting in ugly triangles. For those elements we still use background images.
In short, just another day at the office. I'll just repeat myself here and declare this another typical case of standard css development: read about it and be happy, try it and be disappointed.