Using CSS only to position 3 elements equally around a circle

I am trying to position 3 elements around a circle using CSS only. I have nudged the elements into position by eye, but I am assuming there is a mathematical (PLEASE NOTE: mathematical, NOT programatic) way to determine the top and left numbers for each of the three elements.

The motive here is that I will be rotating the entire block, and the elements should be in the same position after each rotation.

#rotator {   position: relative;   border: 1px solid red;   width: 100px;   height: 100px;   border-radius: 50px;   margin-top: 20px; }  #rotator div {   position: absolute;   border: 1px solid blue;   width: 24px;   height: 24px;   border-radius: 12px;   text-align: center;   background: rgba(255, 255, 255, 0.75); }  #rotator div#a {   top: -12px;   left: 38px; }  #rotator div#b {   bottom: 0;   right: 0; }  #rotator div#c {   bottom: 0;   left: 0; }
<div id="rotator">   <div id="a">a</div>   <div id="b">b</div>   <div id="c">c</div> </div>

Asked on September 1, 2020 in CSS,   Math.
Add Comment
0 Answer(s)

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.