Erlkönig: A Study of (Mostly) Regular Polygons

by C. Alex. North-Keys, 2003-11-04
based on an earlier study by Tantek Çelik, 2001.01.27

An exploration of CSS methods for producing a subset of the regular polygons by manipulation of borders and the border bezel angle. This version improves (at least in browsers with good CSS support, like Mozilla 1.5+) on Çelik's by allowing a single class to be used and coloration to be set from a simple inline style property. An appropriate number of div subelements must still be provided, but require no style or class attributes. The required number is included as a digit in each class name.

Some text (the letters a and e) has been included in non-final sub-divisions, purely to show where such text would begin, if included. The small size of the regions involved in this example preclude greater amounts of text without either distorting or being rendered outside of the figure.

Missing bottom halves of lozenge, pentagon, and hexagon, as well as later parts of the octagon, indicate failure to support CSS v1 inherited color in properties such as: border-top: 1em solid;, where the third parameter, color, is omitted. These polygons are rendered correctly at versions at least as old as Firebird 0.7, Mozilla 1.5+ and Opera 7.21. Internet Explorer 6.0, on the other hand, abysmally fails to render any of the polygons, lamely displaying only the border around the Lozenge Test (just like Netscape 4.7 from 1999).

Lozenge Test

• Lighter colors comprise the 4 borders of the upper box
• Lighter shades comprise the 4 borders of the lower box
• Greens - transparent in actual lozenge
• Reds - the only visible figure in the actual lozenge
• Blues - hidden in actual lozenge by using 0 border widths
• Yellow - border of main object (normally not visible)
• White/Grey - an exposed box background, where borders are transparent
• lizard pattern - where borders and background properties are transparent

Lozenge2

Triangle1

Square1

Trapezoid1

Pentagon2

a

Hexagon2

a

Septagon3

a

e

Octagon3

a

e