2

さて、私がやろうとしているのは、半円の上部に 7 つの円のアイコンを配置することだけです。最初の 3 つのアイコンのみを並べたデモを次に示します: http://jsfiddle.net/yxVkk/15/

アイコンの配置は次のように行われます。

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

このようにすべてのアイコンを配置するのは非常に複雑であることがわかり、より良い方法が必要だと思いました。

この方法を試しましたが、うまくいきませんでした: http://dabblet.com/gist/3864650

それを行う他の方法はありますか？

4

1 に答える 1

5

リンクのメソッドは完全に機能します。

jsフィドル

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

それがあなたが期待したものであることを願っています。大きな円と小さな円の間の距離を広げたい場合は、平行移動を増やしてください。

于 2013-07-28T12:03:36.967 に答える