Trigonometric functions: sin(), cos(), tan(), atan2()

Baseline 2023 (Chrome 111, Safari 15.4, Firefox 108); widely available.

Chrome 111Edge 111Safari 15.4Firefox 108

Trig in CSS makes circular and radial layouts pure CSS: place N items on a ring with `cos()`/`sin()` and a per-item index custom property.

CSS

.fx-019{--n:6;--r:70px;position:relative;width:calc(var(--r)*2 + 40px);aspect-ratio:1;list-style:none;padding:0;margin:0}
.fx-019 li{
  --a:calc(var(--i) * 360deg / var(--n));
  position:absolute;left:50%;top:50%;width:40px;height:40px;display:grid;place-items:center;
  background:#2563eb;color:#fff;border-radius:50%;font-family:system-ui;
  translate:calc(cos(var(--a)) * var(--r) - 50%) calc(sin(var(--a)) * var(--r) - 50%);
}

HTML

<ul class="fx-019">
  <li style="--i:0">1</li><li style="--i:1">2</li><li style="--i:2">3</li><li style="--i:3">4</li><li style="--i:4">5</li><li style="--i:5">6</li>
</ul>

Fallback: Unsupported browsers stack the items at the center; rarely relevant today.

Source: developer.mozilla.org/en-US/docs/Web/CSS/sin

Prompt

For radial menus, clock faces or orbit layouts compute positions in CSS: give each item `--i`, derive `--a: calc(var(--i) * 360deg / var(--n))` and translate by `calc(cos(var(--a)) * var(--r))` and `calc(sin(var(--a)) * var(--r))`. Use `sibling-index()` instead of inline `--i` where supported (see fx-034). No JS positioning.