How to create not clickable area around object?

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">
    <a href="#"></a>
  </div>
  <div class="sub-2">
    <a href="#"></a>
  </div>
</div>

Actually, your code works, in Edge/Firefox but not Chrome, which has a history with clipping and border radius: http://stackoverflow.com/questions/29101743/inconsistent-selectable-area-of-elements-with-border-radius — Asons, Oct 29 '16 at 14:02
Checking up on older answers and found this. I updated my answer with a sample that does work on Chrome too, rotated included, so if you could review it, and if it works upvote/accept it. — Asons, Jan 22 '18 at 09:21

score 0 · Answer 1 · edited May 23 '17 at 10:32

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">
    <a href="#"></a>
    <a href="#"></a>
  </div>
</div>

we have the situation that this circle have a lot of rotation transformation. And there were number of child from 2 to 6 inside. So we don't even now were to use border-top-left-radius: 100%; because it changes dynamically — Івченко Дима, Oct 29 '16 at 12:58
@ІвченкоДима That info was crucial, and since you didn't post that in your initial question, you'll need to show exactly where this is going. As I commented above, Chrome has issues but there might be a way, based on the end result you are after — Asons, Oct 29 '16 at 14:05

How to create not clickable area around object?

1 Answers1