css - 围绕半圆定位元素 (CSS)

Question

好吧，我想做的就是在半圆的顶部周围放置 7 个圆圈图标。这是一个仅按顺序放置前 3 个图标的演示:http://jsfiddle.net/yxVkk/15/

现在图标定位就是这样完成的:

.one {
    left: -35px;
    top: 30px;
}

我发现以这种方式排列所有图标非常复杂，我认为必须有更好的方法。

我试过这个方法，但没用:http://dabblet.com/gist/3864650

还有其他方法吗？

Answer 1

您链接中的方法非常有效。

jsFiddle

CSS

.circle-big {
  position: relative;
  height:180px;
  width:180px;
  padding: 21px;
  border-radius: 50% 50%;
  margin: 100px;
  }

.circle-big:before {
  position: absolute;
  height: 90px;
  width: 180px;
  border-radius: 90px 90px 0 0 ;
  background: green;
  content: "";
  }

.circle {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: red;
  display: block;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  margin: -15px;
  }

 .one   { transform: rotate(-30deg) translate(130px); }
 .two   { transform: rotate(-50deg) translate(130px); }
 .three { transform: rotate(-70deg) translate(130px); }
 .four  { transform: rotate(-90deg) translate(130px); }
 .five  { transform: rotate(-110deg) translate(130px); }
 .six   { transform: rotate(-130deg) translate(130px); }
 .seven { transform: rotate(-150deg) translate(130px); }

希望这是您所期望的。如果您想增加大圆圈和小圆圈之间的距离，只需增加平移即可。