Convert The Circle Border Onto Clickable Function

I have created a circle using div. But I am struggling to convert the circle border into clickable function. My major focus of implementation is React. But if I get the logic in ba

Solution 1:

You should make the quarters seperate. It makes detecting in which quarter you click much easier. I got an example here.

$('.top-left').click(function() {
  console.log("top left")
});
$('.top-right').click(function() {
  console.log("top right")
});
$('.bottom-left').click(function() {
  console.log("bottom left")
});
$('.bottom-right').click(function() {
  console.log("bottom right")
});

#circle-container {
  width: 200px;
  height: 200px;
  position:relative;
  z-index:1;
}

.fill-circle {
  width: 190px;
  height: 190px;
  position:absolute;
  z-index:5;
  background-color:#fff;
  border-radius:190px;
  margin:5px 0px 0px 5px;
  background-image: url('https://darko.co.za/circle-fill.png');
  background-repeat:no-repeat;
}

.quarter {
  position: relative;
  width: 100px;
  height: 100px
}

.quarter-fill {
      position:absolute;
      width: 90px;
      height: 90px;
      background-color:#fff;
}

.top-left-fill {
    bottom:0;
    right:0;
    border-top-left-radius: 200px;
}

.top-right-fill {
  bottom: 0;
  left: 0;
  border-top-right-radius: 200px;
}

.bottom-left-fill {
  top: 0;
  right: 0;
  border-bottom-left-radius: 200px;
}

.bottom-right-fill {
  top: 0;
  left: 0;
  border-bottom-right-radius: 200px;
}

.top-left {
  border-top-left-radius: 200px;
  background: #1fb14e;
  float: left
}

.top-right {
  border-top-right-radius: 200px;
  background: #1ba8e0;
  float: right
}

.bottom-left {
  border-bottom-left-radius: 200px;
  background: #fecc0b;
  float: left
}

.bottom-right {
  border-bottom-right-radius: 200px;
  background: #de232c;
  float: right
}

<div id="circle-container">
  <div class="quarter top-left">
    <div class="quarter-fill top-left-fill"></div>
  </div>
  <div class="quarter top-right">
        <div class="quarter-fill top-right-fill"></div>
  </div>
  <div class="quarter bottom-left">
        <div class="quarter-fill bottom-left-fill"></div>
  </div>
  <div class="quarter bottom-right">
        <div class="quarter-fill bottom-right-fill"></div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>