Sides

A .side is a straight line between two neighbors on a ring. Put N sides on a ring and they close a regular polygon with N corners.

Sides on orbit-11, four on orbit-8 and three on orbit-5.

A side is 1px thick, in the text color. Its look is plain CSS: height for the thickness and background for the color. Its length comes from the number of sides on the ring, so it has no size classes.

Inside or around the ring

By default the corners of the polygon sit on the ring. With .outer-orbit on every side, the middle of each side touches the ring instead, and the polygon wraps around it.

Teal: corners on the ring. Amber: .outer-orbit, sides touching it.

Partial polygons

Sides follow the ring's --o-range and --o-from: three sides on range-180 are half a hexagon. To put a single side at a given angle, use .angle-N on it, as with satellites: angle-90 is the right edge.

Half a hexagon on orbit-10 (range-180 from-270), and four sides over 240° on orbit-6.

A side can carry a .capsule for a label along its edge. See Capsules.

Reference

Class or property	Default	What it does
`.side`		One edge of a regular polygon, as long as the ring's range divided by the number of sides.
`height`, `background`	`1px`, `currentcolor`	Thickness and color.
`.outer-orbit`		The side touches the ring at its middle, so the polygon wraps around it.
`--o-range`, `--o-from`, `.ccw`		From the ring. See Orbits.
`.angle-N`		Puts the side at N degrees, clockwise from the top.