12.2 #Positioning.polar Polar positioning
Positions direct children of the target element at the point with radius
--rho-em, and angle --theta-deg (clockwise from the upward vertical) with
respect to the closest positioned ancestor, without rotating them.
Inputs:
--theta-deg: angular coordinate (clockwise from the upward vertical)--rho-em: radial coordinate
Note: The children are position right inside the radius --rho-em. This is
because positioning them (partly) outside, exposes them to be overlapped with
other elements. This way, instead, if the positioned ancestor does not overlap,
they shouldn't overlap as well, as they are totally inside of it.
Example
Markup
<style>
#dummy {
width: 10em;
height: 10em;
border-radius: 100%;
display: block;
content: '';
border: 1px solid black;
}
#dummy > div > div {
display: block;
content: '';
width: 1em;
height: 1em;
background-image: linear-gradient(225deg, black 50%, transparent 50%);
}
</style>
<div id="dummy" style="--rho-em: 5; position: relative;">
<div class="polar-position" style="--theta-deg: 0;"><div></div></div>
<div class="polar-position" style="--theta-deg: 1;"><div></div></div>
<div class="polar-position" style="--theta-deg: 2;"><div></div></div>
<div class="polar-position" style="--theta-deg: 3;"><div></div></div>
<div class="polar-position" style="--theta-deg: 5;"><div></div></div>
<div class="polar-position" style="--theta-deg: 8;"><div></div></div>
<div class="polar-position" style="--theta-deg: 13;"><div></div></div>
<div class="polar-position" style="--theta-deg: 21;"><div></div></div>
<div class="polar-position" style="--theta-deg: 34;"><div></div></div>
<div class="polar-position" style="--theta-deg: 55;"><div></div></div>
<div class="polar-position" style="--theta-deg: 89;"><div></div></div>
<div class="polar-position" style="--theta-deg: 144;"><div></div></div>
<div class="polar-position" style="--theta-deg: 233;"><div></div></div>
</div>
Source:
css/modules/positioning/polar.css, line 1