CSS hack: multiple background and borders to create icons
Nicolas Gallagher created a interesting, extreme, css hack. See: 〈Pure CSS GUI icons〉 (2010-11-16) By Nicolas Gallagher. At nicolasgallagher.com.
Nicolas Gallagher's no-images css icons.
He created some 80+ icons. No images are used whatsoever, not even in css file. They are done by combining layers of several border, background. Each layer is specifically positioned, z-indexed, and with width and height spec, then using css3 features of rotating or oherwise transform them. The final result is the icon you see. A very advanced hack.
Though, hack they are. In practice, it's much better to use Unicode characters (See: Computing Symbols in Unicode) or images. (more than half of the icons he created doesn't exist as Unicode chars.)
To help me understand how he did it, i copied and reduced and created a much simpler file with just 2 icons. See: CSS Hack to Create Icons.
To understand it, you'll at least need to understand: