仅使用CSS将3个元素均匀地放置在一个圆上

问题描述

我试图仅使用CSS将3个元素围绕一个圆放置。我已经将这些元素微移到正确的位置，但是我假设存在一种数学（请注意：数学，不是程序化）的方法来确定top和left的数字分别表示三个元素。

这里的动机是我将旋转整个块，并且每次旋转后元素应位于相同的位置。

#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,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>

解决方法

不幸的是，没有预处理器（例如SCSS），您将无法执行此操作。感谢@Stef提供了正三角形的顶点的公式。

[CODE] [1] [1]：https：//codepen.io/BlackStar1991/pen/xxVLMVG