如何使用HTML5和CSS 3在圆圈周围放置按钮？

Question

我想在一个圆圈周围安排4个按钮(或引导标签,无关紧要)并在该圆圈的中间加载内容,如下所示:

我怎样才能做到这一点？

Answer 1

您可以使用一小部分jquery来加载您想要的文本的中心圆.

$(document).ready(function() {
  $('.quart').click(function() {
    var ind = $(this).index();
    switch (ind) {
      case 0:
        var tex = "div 1";
        break;
      case 1:
        var tex = "div 2";
        break;
      case 2:
        var tex = "div 3";
        break;
      case 3:
        var tex = "div 4";
        break;
    }
    $('.center').text(tex);
  });

});

.wrap {
  height: 300px;
  width: 300px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.quart {
  position: absolute;
  height: 50%;
  width: 50%;
  background: tomato;
  transition: all 0.4s;
}
.quart:first-child {
  top: 0;
  left: 0;
}
.quart:nth-child(2) {
  top: 0;
  left: 50%;
}
.quart:nth-child(3) {
  top: 50%;
  left: 0;
}
.quart:nth-child(4) {
  top: 50%;
  left: 50%;
}
.center {
  height: 80%;
  width: 80%;
  position: absolute;
  top: 10%;
  left: 10%;
  background: lightgray;
  border-radius: 50%;
  text-align: center;
  line-height: 160px;
}
.quart:hover {
  background: dimgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="quart"></div>
  <div class="quart"></div>
  <div class="quart"></div>
  <div class="quart"></div>
  <div class="center">Click My non-existent Corners!</div>
</div>

这可能不会像svg解决方案那样有效,但可以根据您的需要改变colud.