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

Question

我试图仅使用 CSS 将 3 个元素定位在一个圆圈周围。我已经通过眼睛将元素微调到位，但我假设有一种数学方法（请注意： 数学，NOT 程序）来确定三个元素中每个元素的 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, 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>

Answer 1

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

[代码][1] [1]: https://codepen.io/BlackStar1991/pen/xxVLMVG

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

Using CSS only to position 3 elements equally around a circle

css

math

position