Demo created for my Tight Fitting SVG Shapes, the Present and Future article on CSS Tricks. Visual explanation of how to construct a regular convex polygon with
n vertices (and of course also
n edges). Still a rough version, but tested & works in Firefox 39, Chrome 43, IE 11 on Windows 8.
In the case of regular polygons, all the vertices are on a circle called the circumcircle. Since the polygon is regular, all edges are equal, which means that the radii connecting the central point to the vertices of the polygon split the circle into equal slices. The angle of each such slice is
360°/n, because a full circle is
So we can construct this regular convex polygon of
n vertices by placing points on the circle at every
360°/n and then connecting these points.