剪辑父div的背景颜色[重复]

Question

我正在尝试实现一个复杂的设计，但我在剪辑和遮罩方面遇到了困难。我假设需要剪裁或蒙版的组合，因为我不确定如何使这项工作。我需要将父级或相邻 div 的背景部分剪辑为透明。主 div 有一个小的阴影，因此如果使用纯色代替它会很明显。我已经开始使用标记和 CSS 的粗鲁原型，但我现在所处的位置说明了我需要做的安静的事情。

我需要删除/剪切父 div 的白色背景并使其透明，因为真实的主体/背景不仅仅是纯色。我已经查看了剪辑路径和其他功能，但实际上我需要做与我读到的关于它们的相反的事情。这是我到目前为止的标记和样式：

body {
    background-color: #C4C4C4;
}
.big-div {
    width: 300px;
    height: 100px;
    background-color: #fff;
    left: 100px;
    position: absolute;
    box-shadow: 5px 5px 5px #000; 
}
.number {
    border-radius: 20px;
    height: 50px;
    width: 50px;
    border: solid .5em #C4C4C4;
    padding: .5em;
    top: 10px;
    text-align: center;
    background: #008DCC content-box;
    left: -40px;
    position: absolute;
    clip: circle(100px, 200px, 300px, 400px);
}

还有一些简单的标记：

<div class="big-div">
    <div class="number">
        <p>2</p>
    </div>
</div>

如果我没有像我想要的那样说明我的观点，这里是从 Figma 中提取的相关设计的 sn-p

提前感谢任何提示或建议

Answer 1

这是一种可能的替代方法，使用径向渐变作为较大元素的背景。

实际上，我们使用带有非常小的渐变（1 像素，仅用于平滑边缘）的径向背景在您原本为白色的背景上放置一个透明圆圈。

body {
  /* This gradient is not part of the solution, it just shows that the background is visible beneath the main element*/
  background: linear-gradient(to bottom, #C4C4C4, #B4B4B4 50%, #B4B4B4 50%, #C4C4C4);
}

.big-div {
  width: 300px;
  height: 100px;
  left: 100px;
  position: absolute;
  box-shadow: 5px 5px 5px #000;
  background-image: radial-gradient(circle at 0px 40px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30px, rgba(255, 255, 255, 1) 31px, rgba(255, 255, 255, 1) 100%);
}

.number {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  top: 15px;
  text-align: center;
  background: #008DCC content-box;
  left: -25px;
  position: absolute;
  line-height: 50px;
}

<div class="big-div">
  <div class="number">
    1
  </div>
</div>