| Z | Ô | I | O | N |
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:
,
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).
border-top: 1em solid;
| contact ζωιον |