EFFECTS - CSS: Professional Techniques for Modern Layout - page 172

Figure 5-19: Placing b elements into the corners.

As you can see, each one is sitting in the corner where it belongs,
creating a little 20-by-20 box. h at already points to a problem:
h ey're sitting inside their respective corners. h e red background
should overlap the borders of the div , as in Figure 5-20. So:

b.tl { top : 0 ; left : 0 ; margin : -2px 0 0 -2px ;}
b.tr { top : 0 ; right : 0 ; margin : -2px -2px 0 0 ;}
b.bl { bottom : 0 ; left : 0 ; margin : 0 0 -2px -2px ;}
b.br { bottom : 0 ; right : 0 ; margin : 0 -2px -2px 0 ;}

Figure 5-20: The new
placement of the corners
(close-up).

h is will pull each b outward just enough to overlap the div 's
border. Of course, if the div had thicker borders, you'd pull the b
elements outward by the matching amount.

174

All you need now is an image to i ll in for the corners. And I do mean image, singular: only
one. It looks like Figure 5-21.

Figure 5-21: The entire image used to create the corners.