EACH POLYGON IS CONSTRUCTED WITH a number of identical css triangles. There are as many triangles in each polygon as it has sides.
Hovering a polygon reveals the basic triangle used to make it.

The triangles are absolutely positioned inside a container div and are rotated as necessary using a set of rotational classes defined in a separate stylesheet.

The container div is only for positioning and spacing the polygons on the page; its dimensions do not effect the size or layout of the polygons themselves, since they are absolutely positioned.

Finding the right combination of div heights and border-widths needed to make a solid polygon can take a bit of trial and error; along the way you may discover some interesting effects.

The first triangle is a basic css triangle; the second is built from three separate triangles. The square could be made easily from a single div, of course.

Note: This demo uses the rotation.css stylesheet.