How to create not clickable area around object? - html

Question

It have to be not clickable area around this circle, how do I do that?
.circ {
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 400px;
border-radius: 50%;
background: red;
overflow: hidden;
transform: translate(-50%, -50%);
}
.circ .sub-1,
.circ .sub-2 {
position: absolute;
width: 200px;
height: 200px;
background: green;
}
.circ .sub-1 a,
.circ .sub-2 a {
position: relative;
display: block;
width: 100%;
overflow: hidden;
height: 100%;
background: yellow;
}
.sub-2 {
bottom: 0;
right: 0;
}
<div class="circ">
<div class="sub-1">
</div>
<div class="sub-2">
</div>
</div>

Answer 1

Updated
It should work as is, tested in Edge and Firefox and both work, though Chrome (and maybe other WebKit based browsers too) had an issue earlier with not clipping border radius, and in your case they appear still does.
Here is a workaround, a simplified version of yours that does work, rotated 30 degrees.
The trick to make it work on Chrome (assume all WebKit based browsers) is:
to not use position on the div circ and anchors a
move the 2:nd anchor using margin instead of position
.wrap {
position: absolute;
left: 50%;
width: 400px;
height: 400px;
transform: translateX(-50%) rotate(30deg);
}
.circ {
width: 100%;
height: 100%;
border-radius: 50%;
background: red;
overflow: hidden;
}
.circ a {
display: block;
width: 50%;
height: 50%;
background: yellow;
}
.circ a + a {
margin-left: 50%;
}
<div class="wrap">
<div class="circ">
</div>
</div>