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

<强>更新

它应该按原样运行，在Edge和Firefox中进行测试并且两者都有效，尽管Chrome（以及其他基于WebKit的浏览器）之前的问题不是clipping border radius，而在你的情况下它们似乎仍然存在问题。

这是一个解决方法，你的简化版本可以正常工作，旋转30度。

让它在Chrome上运行的技巧（假设所有基于WebKit的浏览器）是：

在div position上使用circ并锚定a
使用margin而不是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>

如何在对象周围创建不可点击的区域？

1 个答案: