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

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.

Answer 2

You can use the HTML <map> tag - more info