How To Place Buttons Around A Circle with HTML5 and CSS 3?

Question

I want to arrange 4 buttons (or bootstrap tabs,doesn't matter) around a circle and load a content in the middle of that circle,something like this:

How can i do that?

Answer 1

you could use a small bit of jquery to load your center circle with the text you want.

$(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>

This probably won't be as efficient as an svg solution, but colud be altered to your needs.