html - 如何使用 HTML5 和 CSS 3 将按钮放置在一个圆圈周围？

Question

我想围绕一个圆圈排列 4 个按钮(或 Bootstrap 选项卡，无关紧要)并在该圆圈中间加载内容，如下所示:

我该怎么做？

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 解决方案高效，但可以根据您的需要进行更改。