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).

Content!
Content!

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:

Content!

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

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.


Lasse Reichstein Nielsen
Last modified: Tue Feb 25 22:25:44 Romance Standard Time 2003