I'm sorry, I have very little experience with web design, but is this the supposed way to create a triangle? It seems weird there would be no way to build shapes with primitives.
This hack on the other hand will work in every browser all the way back to Netscape Navigator or earlier.
<svg height=10 width=20>
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
.triangle {
background: url("data:image/svg+xml;charset=utf-8,<svg height='10' width='20' xmlns='http://www.w3.org/2000/svg'><polygon fill='red' stroke-width='0' points='0,10 20,10 10,0' /></svg>") no-repeat left center;
width: 20px;
height: 10px;
}
If you want to make a triangle, without an additional (unnecessary) HTTP request, you should use the appropriate web tech which is SVG.
Just like all other resources you can easily embed an SVG in your HTML if you're being stingy on the requests (which is a good thing).
If your compatibility goals are pixel-perfect compatibility with IE8, this is an issue (and my thoughts and prayers are with you), but if your site simply needs to be functional, callout triangles wouldn't be on my top 10 things to worry about.
If you want compatibility with older versions of IE, use both SVG and VML, depending on the browser (VML for IE 8 and earlier, SVG for everything else). This gives you a lot more flexibility (you can draw any polygon, arc, or bezier curve that you want), and compatibility all the way back to IE 5.
Here's a series of examples showing how it works (not a fun animation like the OP, but a little easier to follow): http://jsfiddle.net/X8gXS/
Basically, you can get any triangle as long as at least one of the sides is horizontal or vertical.
sadly, we will see some dozen iterations of 'flash' until that day finally comes. and html5 js shenanigans are only the third...
The web isn't just one visual presentation layer, its a multitude of presentation layers for all kind of people and that demands some compromise.
Also: A lot of the shiny new web apps developed during the last few years are unusable with screen readers and/or on low end devices. As long as we can have graceful degradation, i have nothing against more graphical aspects.
Everyone that needs accessibility is already screwed with regular web presentation hacks. And having to add more presentation hacks to get the presentation right only screw them more.
Accepting the web is a presentation, the effort a few sites do to add accessibility to the hacks could be spent adding micro formats to the page content or something, benefiting blinds and people just wanting a easier way to get the content.
There are several solutions to problems. And the current state of accessibility on the web is not a prime example of a good one.
SVG would be awesome if it could be freely intermixed with HTML. I think I'd ditch HTML for everything other than text boxes and forms.
As for HTML in SVG, there is foreignObject [4.72], but browser support is spotty in places. And wrapping text in arbitrary shapes is on the roadmap for SVG 2, if I remember correctly. But we'll be a bit older when that's universally implemented ;-)
[4.72] https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
The beauty for me is not in the hack itself though, it is in the way it is presented - I adore the simplicity of this approach. Kudos!
Example: http://jsfiddle.net/9pMJS/
#box { position: relative } #box:after {position: absolute; top: -10px; left: 45%; ... }