Diagonal Sprites
Aaron Barker schlägt diagonale Sprites vor um dem Problem zuvorzukommen, das sich das Bild wiederholt wenn das Element in dem es genutzt werden soll größer ist als erwartet:
With the sprite built on a diagonal there are no components below or to the right of the component you are showing. This allows for the element using the sprite to be as wide or as tall as it needs to be with no worry of exposing the next component.
Unfortunately there is a filesize tradeoff. You add a LOT of unused whitespace. For one 30 or so component sprite that I changed from vertically stacked to diagonally stacked, there was only about a 10% increase in size. For another that had around 60 images, it was a 45% increase.
Chris Coyier löst das selbe Problem mit pseudo Elementen:
Use a CSS pseudo element (:before) to add an element with a known width and height in which to apply the image
Pseudo Elemente sind sicherlich eleganter, aber leider noch nicht in jedem Browser unterstützt.