Click through transparent div

Question

I am making a pie-chart with only html and css using divs and conic-gradients. Each slice of the chart is a different div, and fills its section with a color, and the rest with a transparent color. Each slice should be clickable.

Here is the jsfiddle. Like I said earlier, each section should be clickable, but in the above code, when one item is clicked, all three functions are called. What can I do to fix this? I have already tried to use z-index, with no success.

HTML:

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);
}

JS:

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

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

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

user_7079883 · Answer

I don't think that you can achieve this with a div and an transparent gradient because the transparent part is still a part of the div. Maybe this svg-example will help you?

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

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

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

svg {
  width: 200px;
  border-radius: 50%;
  background: coral; 
  transform: rotate(-90deg);
}
 
circle {
  fill: none;
  stroke-width: 32;
  r: 16;
  cx: 16;
  cy: 16;
}
 
circle.first {
  stroke: blue;
 
}
circle.second {
  stroke: red;
}
  
circle.third {
  stroke: green;
}

user_18691704 · Answer

In your .slice{} put that instead :

.slice {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0
}

You will be able to click it just fine.

Click through transparent div

2 Answers