I need assistance creating a unique sliced circle interface where each slice can be clicked to execute different commands, similar to buttons. The design specifications for the slices are as follows:
2 Circles: Main Outer circle and inner circle (half sized compared to outer circle),
3 Lines over the main circle dividing the 2 circles into 12 slices. The vertical line should originate from these 3 lines.
Here is a reference image:
https://i.sstatic.net/ubRDq.png
.maincircle {
height: 404px;
width: 404px;
}
.slice1 {
float: left;
height: 200px;
width: 200px;
border: 1px solid #000;
background-color: #093;
cursor: pointer;
border-radius: 190px 0 0 0;
-moz-border-radius: 190px 0 0 0;
-webkit-border-radius: 190px 0 0 0;
}
.slice1:hover {
background-color: #6C6;
}
.slice2 {
float: left;
height: 200px;
width: 200px;
border: 1px solid #000;
background-color: #093;
cursor: pointer;
-moz-border-radius: 0 190px 0 0;
-webkit-border-radius: 0 190px 0 0;
}
.slice2:hover {
background-color: #6C6;
}
.slice3 {
float: left;
height: 200px;
width: 200px;
border: 1px solid #000;
background-color: #093;
cursor: pointer;
-moz-border-radius: 0 0 0 190px;
-webkit-border-radius: 0 0 0 190px;
}
.slice3:hover {
background-color: #6C6;
}
.slice4 {
float: left;
height: 200px;
width: 200px;
border: 1px solid #000;
background-color: #093;
cursor: pointer;
-moz-border-radius: 0 0 190px 0;
-webkit-border-radius: 0 0 190px 0;
}
.slice4:hover {
background-color: #6C6;
}<div class="maincircle">
<div class="slice1"></div>
<div class="slice2"></div>
<div class="slice3"></div>
<div class="slice4"></div>
</div>