如何在Overlay CSS的底角创建一个空洞区域

问题描述

我尝试在覆盖的底角创建一个洞区域，如下图所示，但仍有问题。

以下是代码的一个示例

 <div className="container h-screen bg-overlay fixed z-50 opacity-90 holes"> 
 </div>

.holes::before {
      content: "";
      display: block;
      /* Scale */
      width: 50px;
      padding: 10px 0px;
      /* Position */
      position: absolute;
      top: 90%;
      right: 60%;
      z-index: 2;
      /* Border */
      border: solid 80px rgb(255,255,255);
      border-radius: 50%;
      opacity: 0.7;
  }

但上面的代码仍然不适合，因为它没有在左下角打洞，而是用伪类打了一个新洞

推荐答案

您可以使用css掩码在具有径向渐变的元素上切割一个洞作为掩码图像。您可以将带有背景径向渐变的洞周围的黄色边框放在同一位置。

此代码片段的容器背景为洋红色，因此您可以看到一个真正的‘洞’是用下面显示的任何东西切割的(尽管背景径向渐变将用透明层覆盖它)。

注意：整页查看代码段

.container {
  background-color: magenta;
  display: inline-block;
  width: 100vw;
  height: 100vh;
}

.div {
  -webkit-mask: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, black 50px, black 100%);
  mask: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, black 50px, black 100%);
  background-color: skyblue;
  background-image: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, yellow 50px, yellow 53px, transparent 53px, transparent 100%);
  width: 100%;
  height: 300px;
  margin: 0;
  padding: 0;
}

<div class="container">
  <div class="div"></div>
</div>