demo · v140

Angle to Percent

Drag the slider — it sets --angle in degrees. The same custom property drives a needle (degrees, native), a bar fill (percent, divide by 1deg to strip the unit) and an opacity (unitless, same trick). One source of truth, three units, all calc.

fill (% of 360°)
12.5%

45deg → 0.125 → opacity = 0.125

:root { --angle: 45deg; }

.dial .needle { transform: rotate(var(--angle)); }
.bar .fill    { width: calc((var(--angle) / 1deg) / 360 * 100%); }
.opacity-target { opacity: calc((var(--angle) / 1deg) / 360); }

why this is news

Before 140 you couldn't do calc(var(--angle) / 1deg): the engine refused to mix a typed value (angle) with a unitless number. Authors used tan(atan2(var(--angle), 1deg)) as a workaround — a roundtrip through trigonometry whose only purpose was to strip the unit. Typed arithmetic finally treats division by a same-typed value as a legitimate way to produce a number.

see also