无法使用剪切路径从div切出半个圆

Question

我正在尝试使用剪切路径从div（蓝色部分）中切出弯曲的形状，但是剪切路径圆没有这个选项。我想使用clip-path，因为默认情况下它会响应。而不是:after，因为它会弄乱小屏幕上的所有内容。这是我想要实现的目标的照片：

这是代码：

.bg-overlay {
    width: 76%;
    min-height: 100vh;
    background-color: darkblue;
    position: absolute;
    top: 0;
    left: 0;
    clip-path: circle(90% at 50px 23px);
}

.wrapper {
  width: calc(100% - 40px);
  height: calc(100vh - 40px);  
  margin: 20px;
  background: cyan;
  z-index: 0;
}

<div class="bg-overlay"></div>
<div class="wrapper"></div>

Answer 1

您可以使用径向渐变来实现此效果，方法是在所需的背景颜色“内部”创建一个透明圆圈：

.bg-overlay {
  width: 100%;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: radial-gradient(circle at 100% 90%, transparent 49.9%, darkblue 50%);
}

.wrapper {
  width: calc(100% - 40px);
  height: calc(100vh - 40px);
  margin: 20px;
  background: cyan;
  z-index: 0;
}

<div class="bg-overlay"></div>
<div class="wrapper"></div>

Answer 2

我认为将clip-path应用于其他div可以达到目的。否则我可能会误解您的问题。

body { margin: 0; }

.wrapper {
  width: 100%;
  min-height: 100vh;
  background-color: darkblue;
}

.bg-overlay {
  width: 100%;
  height: 100vh;  
  background: cyan;
  z-index: 0;
  clip-path: circle(90% at 115% 70%);
  position: absolute;
  top: 0;
  right: 0;
}

<div class="bg-overlay"></div>
<div class="wrapper"></div>