如何在物體周圍創建不可點擊的區域？

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的瀏覽器）是：

• 對DIV circ和主持人a
• 舉動不使用position 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>