How to select multiple circular DIV elements? - html

Question

I am trying to create a webpage that displays a circle broken up into quadrants and allows the user to select one or more of the quadrants by clicking on them. After a user clicks a quadrant to select it, the quadrant would change color.
Below is a snippet of HTML that displays the upper two quadrants.
Using HTML, CSS, and/or JavaScript, how I can update my code to actually do this?
I've tried various solutions, but the closest I got was being able to select a single quadrant at a time and changing the background color of the enclosing square DIV, not the circular quadrant's color.
<div style="display:inline-block;
position:relative;
height:500px;
width:500px;">
<div style="position:absolute;
top:0;
left:0;">
F1
</div>
<div style="background:#CCC;
border:2px solid #000;
border-radius:500px 0 0 0;
color:#000;
height:500px;
width:500px;">
</div>
</div>
<div style="display:inline-block;
position:relative;
height:500px;
width:500px;">
<div style="position:absolute;
top:0;
right:0;">
F2
</div>
<div style="background:#CCC;
border:2px solid #000;
border-radius:0 500px 0 0;
color:#000;
height:500px;
width:500px;">
</div>
</div>

Answer 1

You can create a simple 2x2 grid using flex, grid, inline-block, etc and use border radius on the container instead of the elements.
Then you can easily add JS code to change background-color of element on click.
$('.box > div').click(function() {
$(this).toggleClass('select');
})
.box {
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
border: 1px solid;
display: flex;
flex-wrap: wrap;
}
.box>div {
height: 50%;
width: 50%;
border: 1px solid #000;
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
color: #fff;
}
.box>div.f1 {
border-left: 0;
border-top: 0;
background: blue;
}
.box>div.f2 {
border-right: 0;
border-top: 0;
background: red;
}
.box>div.f4 {
border-right: 0;
border-bottom: 0;
background: green;
}
.box>div.f3 {
border-left: 0;
border-bottom: 0;
background: orange;
}
.box>div.select {
background: #111;
}
.box>div:hover {
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="f1">F1</div>
<div class="f2">F2</div>
<div class="f3">F3</div>
<div class="f4">F4</div>
</div>