|
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
-
- Hexagon2
-
- Septagon3
-
- Octagon3
-
|