Eric Meyer has produced some wonderful page designs based on pure CSS (go see), really pushing the envelope out to the edges. In particular, one called Slantastic creates text areas with slanted boundaries (similar to this page). Eric's version is pure, scalable and works beautifully in Netscape, with text flowing fluidly within the new boundaries.
MSIE5x however fails to meet CSS expectations. This was disappointing as I do most of my work in MSIE, and kind of like it. So I just had to see if there was a way to redeem MSIE. There is. You are looking at it, and it works for both NS and MS. Not bad, except I can't quite get the slanting edge to start in the corner on the first line. Not for either browser... Also check out a double sided version
Eric's trick depends on the slant at which adjacent edges of a border meet
if they are of different colors.The other two border segments are set to border-width:0. Using textboxes of different widths, stacked on the right by floating them there, and matching colors with backgrounds of text and page, Netscape produces a nicely angled edge! The angle of slant depends on the ratio of the widths of the border segments, while the smooth join of successive slant edges depends on zero-height content area together with an increment in text box width equal to the width of the vertical border segment. Got that??
MSIE appears to insist on a content area at least 1.22em high, which results in a staggered edge with fingers sticking out - a real mess, not shown! We can fix MSIE's problem, but at cost of considerable complexity.
We insert an additional step, forcing NS to use the same height as MS ( asserting a height-value in the DIV style), and then cancels it iwith a negative bottom margin .
This works neatly except at the switch from one slant to another, the lines don't meet. A special DIV with a vertical edge is used to seperate the two slanting portions, the next snag being the different width computation of NS and MS.
This is fixed by adding 1em right padding, which changes the width of the text-box for NS but not for MS (those different width computations again!).
We can illustrate this mildly devious use of CSS using colored border segments
Basic box showing colors chosen for explanation. Stacked to right and left, two adjacent border segments have zero thickness, while the other two (non-zero, adjacent) determine the slope
Now imagine changing the colors as follows - yellow and red go to white, and lime, green and blue go to soft blue. This would result in a demo similar to the above.
Notice the horizontal rule? MSIE5x and Opera5x draw it within the slanted boundary, NS6x uses the full width of the original container.
You may notice that the slant is independent of the character size, so it turns out that re-tuning is not necessary if you change font size. An obvious idea therefore is to replace the "em"s in the associated style sheet with px's. Up to a point this works. But when the font size exceeds the defined pixel height of the text box (1.22*em>h), MSIE asserts itself and overrides with its minimum default height. The pale fingers that Eric initially complained about in the MSIE presentation then return again to strangle you!
I also tried a double sided version of Slantastic, with sloping edges on both sides. To see how this worked out, check out SSBiSlantastic
Incidentally, the chamfered corners at the bottom of this div are also pinched from Eric's site. Very cute, go see. Actually its based on the same trick as the above, but used with more restraint!