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); }

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