A "slant" is an HTML-element that appears to be slanted edges. It is made with borders on empty elements.
The basis for a slant is an empty <div>-element with borders. To be completely empty, its contents needs to have both width and height of 0px. For this, we use the following CSS-style:
.borderdraw { border-style: solid; width: 0px; height: 0px; line-height: 0px; }
The border-style is the one that makes the most sense, other choices can be ... entertaining. The width and height must be zero, and still some browsers make vertical room for an inline element anyway, so we set the line-height to zero as well.
Now we must choose the widths and colors of the borders. We will aim for a blue triangle on white background pointing down. For this we use the following style:
.bluedown { border-width: 100px 50px 0px; border-color: blue white white; }
The last thing we need is the <div>-element itself:
<div class="borderdraw bluedown"><!-- --></div>
The HTML-comment in the middle prevents IE 5 from inserting an empty text-block. IE 5 doesn't seem to fall for the line-height:0px trick, but this does the trick instead.
The result (with a black border around):
You can also see some example uses of slants.
Last modified: Thu Jan 30 21:56:16 Romance Standard Time 2003