围绕半圆(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); }

希望这是你的期望.如果你想增加大圆圈和小圆圈之间的距离,只需增加平移即可.