POLYGON 3
POLYGON 4
POLYGON 5
POLYGON 6
POLYGON 7
POLYGON 8
POLYGON 9
POLYGON 10
STELLATED POLYGON 3
STELLATED POLYGON 4
STELLATED POLYGON 5
STELLATED POLYGON 6
STELLATED POLYGON 7
STELLATED POLYGON 8
STELLATED POLYGON 9
STELLATED POLYGON 10
[DOUBLE STELLATION 3]
[DOUBLE STELLATION 4]
DOUBLE STELLATION 5
DOUBLE STELLATION 6
DOUBLE STELLATION 7
DOUBLE STELLATION 8
DOUBLE STELLATION 9
DOUBLE STELLATION 10
SNOWFLAKE 7
SNOWFLAKE 8
SNOWFLAKE 9
SNOWFLAKE 10
POLYGONS AND STARS (OR STELLATED POLYGONS) made from rotated divs. For all of these figures, the transform-origin property has values transform-origin: [>100%], 50%;, with the x-value typically in the 500–1000% range.
The heights of the divs are individually adjusted so as to make (in most cases) pointed stars. Increasing or decreasing the heights from these optimal measures, or changing the x-value of the transform-origin property will turn the stars into spiky “snowflakes”. Some of the stars have border-radius applied to the divs to make nice-looking points.
Note: This demo uses the rotation.css stylesheet.