If you want it to work with IE8

[thesheep]

Just add a fallback that uses background-color: transparent instead of rgba.

/* Fallback for IE8- which doesn't understand rgba */
border: 20px solid transparent;
/* Feed rgba to other browsers (FF PC needs it to avoid a bug) */
border: 20px solid rgba(255,255,255,0);

[thany]

What's the point of the rgba() version anyway? Zero opacity with any color is the same as transparent, is it not?

[thesheep]

As I said in the comments within the CSS above, some browsers need the 'transparent' version (IE8-) and other browsers specifically need the rgba() version (FF PC). So the reason for having the rgba() version is to support that particular browser.

[hojberg]

I'll add this shortly.

[thany]

Loosely related, can you (@thesheep) point to a resource that describes or demonstrates the bug in FF? I'm quite interested to see what it's about. Because, I've personally never seen any issues with it, to be perfectly honest.

[thesheep]

@thany Um, no sorry. I tested it on a page I was building at the time, but don't have access to it anymore. If you've tried the code above and you don't have a problem on FF for Windows, then perhaps they have plugged the issue with a new version of FF? Should be fairly easy to test.

[thany]

I did some more research on this in the mean time, and the only thing I could find is a thin darkened border appearing on the slanted sides of the "triangle", but only when hardware acceleration is disabled in Firefox options. Of course we shouldn't assume hardware acceleration is always enabled.

I also read it can be worked around by using border-style: outset instead of the usual solid. But that produces a slighty weird result as well, on all IE's. So I guess rgba() is the better option after all.

At least it's been cleared up so far :)