円のゾーンでその位置を `div`とすることは可能でしょうか？

Question

クリックすると円のようなdivの多くを表示する簡単なボタンを作成したいと思います。

は、私は上の画像のような赤いdivを作りたい、この

ように見えます。その可能性はCSSでのみ可能ですか？

Answer 1

だ私はあなたがこのためにJavaScriptを使用することをお勧め、その後、あなたは、このような円を調整し、生成できるパラメータで関数を作成することができます。

function createCircle(parentWidth, innerCircleWidth, innerCirclesN) { 
 
    var pi = Math.PI, 
 
    n = innerCirclesN, 
 
    widthC = parentWidth/2, 
 
    widthI = innerCircleWidth, 
 
    angle = (2 * pi/n), 
 
     
 
    parentCircle = $('<div class="circle"></div>').css({ 
 
     width: widthC * 2 + 'px', 
 
     height: widthC * 2 + 'px' 
 
    }) 
 

 
    for (var i = 0; i < 2 * pi; i += angle) { 
 
    var innerCircle = $('<div class="inner"></div>'); 
 

 
    innerCircle.css({ 
 
     left: widthC - widthI/2 + widthC * Math.cos(i) + 'px', 
 
     top: widthC - widthI/2 + widthC * Math.sin(i) + 'px', 
 
     width: widthI + 'px', 
 
     height: widthI + 'px' 
 
    }); 
 

 
    parentCircle.append(innerCircle); 
 
    } 
 
    $('body').append(parentCircle); 
 
} 
 

 
createCircle(100, 20, 6); 
 
createCircle(250, 50, 13); 
 
createCircle(400, 100, 10)

.circle { 
 
    background: #546E7A; 
 
    border-radius: 50%; 
 
    margin: 100px 50px; 
 
    position: relative; 
 
} 
 
.inner { 
 
    border-radius: 50%; 
 
    background: red; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

ここで私は予想通りの結果を出しました。私はちょうどこれのようにする。

 <style> 
     .circle-wrapper { 
      width : 500px; 
      height : 500px; 
      border-radius: 50%; 
      background: #eee; 
      position: relative; 
      margin: 100px; 
     } 

     .circle { 
      display: block; 
      position: absolute; 
      top:50%;left: 50%; 
      width:100px;height:100px;margin: -50px; 
      background: red; 
      border-radius: 50%; 
      text-align: center; 
      line-height: 100px; 
     } 

     .deg-0 { transform: translate(250px) } 
     .deg-45 { transform: rotate(45deg) translate(250px) rotate(-45deg); } 
     .deg-90 { transform: rotate(90deg) translate(250px) rotate(-90deg); } 
     .deg-135 { transform: rotate(135deg) translate(250px) rotate(-135deg); } 
     .deg-180 { transform: rotate(180deg) translate(250px) rotate(-180deg); } 
     .deg-225 { transform: rotate(225deg) translate(250px) rotate(-225deg); } 
     .deg-270 { transform: rotate(270deg) translate(250px) rotate(-270deg); } 
     .deg-315 { transform: rotate(315deg) translate(250px) rotate(-315deg); } 
    </style> 

    <div class="circle-wrapper"> 
     <div class="circle deg-0">0</div> 
     <div class="circle deg-45">45</div> 
     <div class="circle deg-90">90</div> 
     <div class="circle deg-135">135</div> 
     <div class="circle deg-180">180</div> 
     <div class="circle deg-225">225</div> 
     <div class="circle deg-270">270</div> 
     <div class="circle deg-315">315</div> 
    </div> 

そして、ここに私のバイオリンはhttps://jsfiddle.net/3sbu2ecc/