html - 将 div 裁剪到同级 div

Question

我有以下重叠的 div:

#circle {
    width: 150px;
    height: 150px;
    background-color: rgba(0, 0, 0, .3);
    position: absolute;
    border-radius: 100%;
    margin-top: 30px;
}

#rect {
  margin-left: 20px;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: lightblue;
  display: inline-block;
}

<div id='wrapper'>
  <div id='circle'></div>
  <div id='rect'></div>
</div>

我想让圆形 div 只出现在矩形 div 内部，但我不能将一个 div 放在另一个 div 内部并使用溢出。如何实现这一目标？

Answer 1

如果只是为了视觉效果，请使用圆圈作为 div 的背景:

#rect {
  margin-left: 20px;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background:radial-gradient(circle 75px at 55px 105px, rgba(0, 0, 0, .3) 99%,transparent);
  background-color: lightblue;
  display: inline-block;
}

<div id='wrapper'>
  <div id='rect'></div>
</div>