I am trying to split the ring into 4 equal segments. This donut ring is clickable on all parts of the segment. But when I am trying to change the skew it cannot make them equal and actually in current donut ring there is a double line on the top segment left and right border. The top and bottom segment is quite bigger compare to left and right segment.
This code snippet is what I have tried working on.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 200px;
}
.pie {
position: relative;
margin: 1em auto;
border: 4px solid black;
padding: 0;
width: 15em;
height: 15em;
border-radius: 50%;
list-style: none;
overflow: hidden;
}
.slice {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
border: 2px solid black;
box-sizing: border-box;
}
.slice-contents {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
}
.slice:nth-child(1) {
transform: rotate(-60deg) skewY(30deg) scale(1.2);
}
.slice:nth-child(1) .slice-contents {
transform: skewY(-30deg); /* unskew slice contents */
background: white;
}
.slice:nth-child(2) {
transform: rotate(60deg) skewY(30deg) scale(1.2);
}
.slice:nth-child(2) .slice-contents {
transform: skewY(-30deg); /* unskew slice contents */
background: white;
}
.slice:nth-child(3) {
transform: rotate(180deg) skewY(30deg) scale(1.2);
}
.slice:nth-child(3) .slice-contents {
transform: skewY(-30deg); /* unskew slice contents */
background: white;
}
.slice:nth-child(4) {
transform: rotate(120deg) skewY(30deg) scale(1.2);
}
.slice:nth-child(4) .slice-contents {
transform: skewY(-30deg); /* unskew slice contents */
background: white;
}
.inner-pie {
position: absolute;
width: 7em;
height: 7em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 4px solid black;
background: white;
}
#top, #bottom, #left, #right, #center {
cursor: pointer
}
</style>
</head>
<body>
<div class="container">
<ul class='pie'>
<li class='slice'>
<div id="top" class='slice-contents'>click 1</button>
</li>
<li class='slice'>
<div id="right" class='slice-contents'>click 2</button>
</li>
<li class='slice'>
<div id="left" class='slice-contents'>click 3</button>
</li>
<li class='slice'>
<div id="bottom" class='slice-contents'>click 4</button>
</li>
<li id="center" class='inner-pie'>
</li>
<ul>
</div>
</body>
<script>
document.getElementById('top').onclick = function() {
document.getElementById("top").style.backgroundColor = "red";
};
document.getElementById('bottom').onclick = function() {
document.getElementById("bottom").style.backgroundColor = "red";
};
document.getElementById('right').onclick = function() {
document.getElementById("right").style.backgroundColor = "red";
};
document.getElementById('left').onclick = function() {
document.getElementById("left").style.backgroundColor = "red";
};
document.getElementById('center').onclick = function() {
document.getElementById("center").style.backgroundColor = "red";
};
</script>
</html>
