// Generically
<img src="images/arrow-sprite.png" alt="arrow" class="clip pos-1" />
.clip { position: absolute; top: 0; left: 0; }
.pos-1 { clip:rect(0 48px 48px 0); }
.pos-2 { clip:rect(0 96px 48px 48px); left: -48px; }
.pos-3 { clip:rect(48px 48px 96px 0); top: -48px; }
.pos-4 { clip:rect(48px 96px 96px 48px); top: -48px; left: -48px; }
// Within Flow
// Use the same CSS as above, only wrap the image in a div with relative positioning and a matching height and width to the area you want to show.
<div class="clipwrapper">
<img src="images/arrow-sprite.png" alt="arrow" class="clip pos-1" />
</div>
.clipwrapper { position: relative; height: 48px; width: 48px; }
/*
Points to remember
* The element needs to be absolutely positioned.
* To use it on an element and keep document flow, using a wrapping div with a relative position.
* The clipped away areas are transparent but still occupy space.
* For sprites other than the top/left sprite, you'll need to nudge the position back the same top/left distance you clipped away.
*/