Question

我想创建一个简单的按钮，点击它时会显示大部分{圈}区域中的div。

看起来像这样

我想在上面制作红色的div图像。它只能用CSS完成吗？

Answer 1

我建议您使用javascript，然后您可以使用参数创建功能，您可以调整并生成这样的圆圈。

＆＃13;

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)

＆＃13;

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

＆＃13;

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

＆＃13;

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/

有可能创建一个位于圆形区域的“div”吗？

2 个答案: