剪辑父项的背景颜色 div

Question

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

我需要 remove/clip 父级 div 的白色背景并使其透明，因为真正的 body/background 不仅仅是纯色。我看过剪辑路径和其他功能，但实际上我需要做与我读过的相反的事情。这是我目前的标记和样式：

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

中提取的相关设计片段

提前感谢您的任何提示或建议

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>

剪辑父项的背景颜色 div

Clip background color of parent div

html

css

svg

clip