I’ve been impressed with icons created in CSS3 and decided to have a go at it. As an experiment I took Dustin Curtis’ markdown mark and made a version using only HTML and CSS. This is the result (separate page):
Unfortunately, due to two issues in current browsers the icon is not pixel perfect.
The M portion of the icon is rendered using the :before pseudo tag with a content attribute. By default text in browsers on a Mac (I haven't tested on Windows) is rendered using sub pixel antialiasing. I was able to make the drawing of the M more accurate by setting -webkit-font-smoothing to antialiased but the end result still has 1 pixel grayish border on both sides of the M. It should be possible to reproduce the M using CSS shapes, but that's outside the scope of my experiment.
Note that -webkit-font-smoothing also allows never but the result is awful:
Ironically, the second issue is the lack of antialiasing on borders. Dustin's original arrow shape is very crisp whereas my version has jacked edges. The most obvious solution is to render a div with a solid background and use :before and :after to overlay two rotated rectangle. This would create the same effect but probably without the jacked edges. I was however unable to get this to work without the rotated rectangles overlapping others parts of the icon.
If you know why browsers don't antialias borders or how to get the arrow more crisp; please mention me on Twitter or comment on the pull request.