If you check out here:
You'll notice the background box and little triangle over the "explore" menu item. I absolutely love Tumblr's design, so I've been trying to learn what I can from it. When I used Chrome's handy developer's tools, I saw that, for the little triangle, they "drew" it pixel by pixel. They have 6 divs a pixel tall. The first is 11 pixels wide, the second is 9, the third 7...
This raises all sorts of little flags in my head, but I've only just gotten into web development, so I figured I would ask people who know more about it.
So, all you pros out there, what are the pros and cons of doing a design pixel by pixel with HTML elements instead of using an image?
The advantages are that it will be identical across browsers, even IE6, and it doesn't make an extra HTTP request for the background image method.
The drawback, of course, is an increased HTML and CSS weight, decreased semantics, and a messier-looking code. A better alternative, even to using an image, would be to use a pseudo-element, shaped to look like a triangle. It wouldn't take away from a clean code, or semantics.