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

Note how each slice is just wide enough to contain the visible portion of the curve, and no
more. Now toss those slices into the markup right before the point where you want the curve
to start.
< div class="curves">
< img src="curve_1.gif" alt="">
< img src="curve_2.gif" alt="">
< img src="curve_3.gif" alt="">
< img src="curve_4.gif" alt="">
< img src="curve_5.gif" alt="">
</ div>
Of course, more slices means more img elements, but you get the idea. h e CSS is then really,
really simple:
.curves img { float : left ; clear : left ; margin-right : 1em ;}
h e margin keeps the text from getting too close to the slices, and can be adjusted as needed.
If you add a temporary border to the images, as shown at the top let of Figure 5-46, you can
see what's happening in the browser.
.curves img { border : 1px solid red ;} /* temporary */
192
Figure 5-46: The curve slices with borders turned on for visualization.