slantastic

In every browser I've tested, you should see what appears to be an irregularly-shaped white area containing some text. This text, as a matter of fact. Not every browser does it well, but some at least get close; during my testing, the standouts were Netscape 6.2 and Opera 5.12. If you want to see something that's more cross-browser friendly, based on images instead of regular text elements, you might be interested in something a bit more curvelicious. Meanwhile, we'll soldier on here.

So if you're here with a good CSS2-supporting browser, you should see a white area with an irregularly-shaped right edge, and the text flowing along with the slanted edge. And you thought Web design was all rectangles.

Floating along...

The key here is a number of empty div elements that have been floated to the right. They "stack up" on top of one another by using float and clear in conjunction, as you can see in this excerpt from the CSS:

float: right; clear: right;

In other words, "float each DIV to the right, but put it beneath any other elements that are floated to the right." In order to get the slant effect, I make sure the divs all have no content (not even whitespace), thus causing their width and height to default to zero. Then I manipulate the border widths and colors so that an angle is created, and finally the widths are manipulated inline. Here's an example of three (non-floated) divs in a row that use a similar effect:

Go ahead, check out the source. Three div elements, some borders, and no content. That's it. The trick is in setting some border to have zero width, and some to have width but be the same color as the background of the "text" area here in the middle (white), and one border to be very thick and the same color as the body background (a medium blue).

Each DIV has a width measured in ems, and the border widths are all in ems or fractions thereof, so the elements scale seamlessly. By altering the ratio of border widths, I alter the angle that's produced. For example, the long, sloping slant is a 3:1 angle, because the top border is 3em tall and the left border is 1em wide. The 45-degree angle slant is a 1:1 slope. Pretty much any angle at all could be created just by altering the proportions to taste.

As for the separation between the "slant" divs and the text, that's affected by setting a left margin on the slants. More margin means wider separation. Oh, and the bottom "cutoff" corners, the ones right below the "Acknowledgments" section? Another DIV.

Since you've come this far, want to get pyramidal?

Problems

In IE5.5/Win, the area is really irregular, because the "slant" area to the right is broken up by thick white lines. While this is an interesting effect, it's also an indication of some pretty broken float code. In IE5/Mac, the text doesn't flow into the entire available area, but restricts itself to be only as wide as the narrowest available point. Also, if you float an element left but give it zero width, IE5/Mac will reset it to 100% width for no apparent reason but draw the text over it. And Netscape 6.2 will sometimes (but not always) let the text overlap the floated elements, which is definitely in error. This one definitely pushes the envelope pretty hard.

Acknowledgments

The inspirational source for this demo was Tantek Çelik's experiments in creating scalable regular polygons in IE5/Mac using nothing but HTML and CSS.