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

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

围绕半圆（CSS）定位元素

1 个答案: