THIN STAR 3
THIN STAR 4
THIN STAR 5
THIN STAR 6
THIN STAR 7
THIN STAR 8
THIN STAR 9
THIN STAR 10
THICK STAR 3
THICK STAR 4
THICK STAR 5
THICK STAR 6
THICK STAR 7
THICK STAR 8
THICK STAR 9
THICK STAR 10
POLYGON 3
POLYGON 4
POLYGON 5
POLYGON 6
POLYGON 7
POLYGON 8
POLYGON 9
POLYGON 10
A DIFFERENT APPROACH TO MAKING CSS stars and polygons.
As described elsewhere, these are absolutely-positioned and rotated elements inside of container elements, which have been given position:relative. But in this case, instead of css triangles, we are using ordinary rectangular divs with a background color and no borders. (Hover the figures to see the fundamental unit.)
Since these are simple divs, the stars’ points are squared off, which might be useful in itself, but it suggests another method of making polygons.
In the first set of examples, the individual divs have width:10px; height:100px;. The second, thicker set is identical except the width is now 50px. You can see how the squared-off ends of the thicker set are coming closer together. In the final row, the widths have been individually adjusted to create solid polygons. (The method does’t work for the triangle because the divs’ 90° corner angle is greater than the triangle’s 60° corner angle.). All have been positioned to center them in their containers.
Note: This demo uses the rotation.css stylesheet.