4

奇妙なことに、このトピックに関するものは何も見つかりませんでした。かなり一般的な問題だと思いました！

私が持っているのはborder-radius、divを円形にする親divです。そのdivにネストされた、私が望むいくつかの子divがあります：

  • 目に見える円形の境界線に直接配置されます (div を囲む目に見えない正方形の「境界線」とは対照的に、この jsFiddleは、私がここで言おうとしていることを明確にすることを願っています)。
  • さらに、この境界線のさまざまなポイントに沿って子 div を正確に配置できるようにしたいと考えています (したがって、「childDiv1 を円形の 90 度の位置 [または 105 度の位置、120 度、135 度など] に配置する」など)。親 div" を使用topしleftたり、絶対ピクセル値などを割り当てたりする必要はありません)。

まだCSSの位置を把握しようとしているアマチュアなので、これが可能かどうかさえわかりません. 皆さんが提供できる情報を楽しみにしています！

4

3 に答える 3

3

css3 transformとtransform-originを使用してこれを実現できます

<div id="parent">
    <div class="child" id="child1"></div>
    <div class="child" id="child2"></div>
    <div class="child" id="child3"></div>
    <div class="child" id="child4"></div>
</div>

#parent {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px dotted #000;
    border-radius: 150px;
}

.child {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #666;
    left: 135px;
}
#child1{
    transform: rotate(90deg);
    transform-origin:50% 150px;
}
#child2{
    transform: rotate(105deg);
    transform-origin:50% 150px;
}
#child3{
    transform: rotate(120deg);
    transform-origin:50% 150px;
}
#child4{
    transform: rotate(135deg);
    transform-origin:50% 150px;
}

http://jsfiddle.net/zSdsg/20/

于 2012-08-16T04:01:34.507 に答える
1

http://jsfiddle.net/zSdsg/15/top:0 （円が突き出ていない ことを示すために更新されました。）

またはhttp://jsfiddle.net/zSdsg/17/、これはかなりクールに見えます：}

編集：私はあなたの質問を誤解したと思います。回答に応じて、回答を更新または削除します。

于 2012-08-16T03:09:46.003 に答える
0

http://jsfiddle.net/zSdsg/14/

このようなものがあなたが探しているものでしょうか？

#parent {
position: relative;
width: 300px;
height: 300px;
border: 1px dotted #000;
border-radius: 150px;
}

#child {
position: absolute;
width: 30px;
height: 30px;
background-color: #666;
}
#child2 {
position: absolute;
top:35px;
left:40px;
width: 30px;
height: 30px;
background-color: red;
    border-radius: 150px;
}

</ p> 

<div id="parent">
<div id="child"></div>
<div id="child2"></div>
</div>​
于 2012-08-16T03:13:39.787 に答える