Как создать область без кликов вокруг объекта?

Question

Это не должно быть кликабельная область вокруг этого круга, как я могу это сделать?

.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>

Answer 1

Обновлено

Он должен работать как есть, испытанный в Крае и Firefox и обе работы, хотя Chrome (и, возможно, другие браузеры на основе WebKit тоже) были проблема раньше с не clipping border radius, и в вашем случае они все еще появляются.

Вот обходной путь, упрощенная версия, которая работает, поворачивается на 30 градусов.

Хитрость, чтобы сделать его работать на Chrome (предположим, что все браузеры на основе WebKit) является:

• не использовать position на DIV circ и якорей a
• переместите 2: й анкер с использованием маржи вместо из 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>