This article is a reprint of one written in 2003 by Lasse Reichstein Nielsen. We thought it would be interesting to re-investigate his experiments because of all the changes in browsers since then. If you want to try these yourself then just right click and grab the source code. The figures are created using inline CSS tagging.

Slants

First, credit where it is due: All I know about this was learned from looking at Eric Meyer's Slantastic Demo and playing around.

This page only works with IE and Opera in standards mode. It should work in IE5.0+, Opera 6.0+, recent Mozillas, and Konqueror 3.

What is a "slant"

It's a hack. A trick. It is a way to make pure HTML and CSS draw something that is neither vertical nor horizontal. And it uses borders.

Some examples of boxes with borders (sizes: 120px, 50px, 20px, and 0px squares, 10px borders):

See how nice those corners join! Each corner has a slanted edge, and the last box is nothing but slanted edges. Let's try again with larger (50px) borders:

Pretty! Now, if those borders didn't all have different colors, maybe it would look more like one slanted edge:

Voila, the first "slant"! In the following, the colors will be dimmed, but not made completely black and white, in the examples of slants. This allows you to see how the slant is made. You can also see the actual code used to make a slant.

You don't have to make all the borders have the same width. Changing the widths, while keeping the total left/right and top/bottom widths the same, can move the "center" of the slants.

A triangle! Of course, the overall size need not be the same either.

Simple triangles can be used for decoration, and with Javascript to change
their colors on the fly, semi-esthetic "art" can be produced: Random Art, Higher Resolution Random Art, and Animated Random Art.

Building with slants

We will look more at the triangle shape. This shape is actually
useful for many things, both as a triangle and as a slanting
block.

This slanting block can be scaled by changing the left and right border widths. Ofcourse, similar blocks, but rotated or mirrored, can be made in the same way. Such slants are great for adding edges to a screen or element.

Another option is to change the internal width/height of the slant-box to something non-zero. This can give us trapezoids. In this example, the width is 50px:

An example use of slanting blocks, in a somewhat larger scale than usual: The Slippery Slope!

Connecting many slants can give the illusion of curves. For that special Valentines Greeting, you can use the Slanted Heart.

The lone triangle can also be manipulated in different ways.

Properly aligned triangles can look like more complicated geometrical shapes. See the rotating box demo for an example (requires JavaScript and a DHTML-enabled browser).

Properly sizing trapezoids and triangles can create pentagons:

... and hexagons:

... and in fact, any regular polygon with angles of more than 90 degrees (i.e. squares and up). Some triangles can be drawn, but not all.

A slanting block can always be simulated by composing a square and a triangle, it is merely a convenience. Likewise trapezoids can be composed by slanted blocks or by triangles and squares. Some times, doing so is actually better, since it allows you to put content in the square elements:

Cutting the polygon in different ways can give more room for content:

Restrictions

Sadly, you can not make just any triangle in this way. Each
triangle must be firmly rooted on one side of the box, so at least one
edge must be horizontal or vertical. Also, that edge also fills the
entire width or height of the triangle, so the adjacent angles cannot
be above 90 degrees. That means that there is no way to construct
an angle below 90 degrees unless it can be divided into two triangles
with a vertical or horizontal line. An angle where vertical
and horizontal lines touching the point are all outside the angle
can not be made with "normal" slants .

There is one way around this problem, although not as easy or
portable. It requires the browser to support transparent edges. With
transparent edges, two triangles can be positioned on top of each
other without obscuring. The following example shows this. We position
two triangles, one yellow and one green, on top of a black background.
Currently it only works in Mozilla (or any other Gecko-based browser)
and Opera 7. In other browser, only the topmost, green, triangle is
visible.

For an example where transparent edges are necessay, see the Slant Star (drawn for Opera when they announced transparent edges in Opera 7).

When we do have transparent edges, many things become possible. One is particularly interesting: Drawing lines. If we make a slanted edge, and then, with a little offset, another one with the background-color, what is left looks like a line.

It is possible to order the drawing of these lines (e.g. from right to left) so that the background-color does not obscure other lines. That makes it possible to draw arbitrary (non-crossing) lines.

For a dynamic example, see the Rotating Star demo. Also proves that DHTML and JavaScript are not fast enough to do wire-frame games.

Happy Publishing!

This article brought to you by the Hiveminds Magazine - Staff. Contact us if you want to post an article or announcement anonymously