JSFiddle - React, Tailwind, and code Playground

by johnyboi

HTML

<div class="slice" id="slice1" onclick="click1()" />
<div class="slice" id="slice2" onclick="click2()" />
<div class="slice" id="slice3" onclick="click3()" />

CSS

.slice {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

#slice1 {
  background-image: conic-gradient(red 120deg, transparent 120deg);
}

#slice2 {
  background-image: conic-gradient(transparent 120deg, green 120deg, green 240deg, transparent 240deg);
}

#slice3 {
  background-image: conic-gradient(transparent 240deg, blue 240deg);
}

JavaScript

function click1() {
	console.log("1");
}

function click2() {
console.log("2");
}

function click3() {
console.log("3");
}