无法使用剪辑路径从 div 中切出半圆答案

【问题标题】：Unable to cut out half circle from div with clip-path无法使用剪辑路径从 div 中切出半圆
【发布时间】：2021-01-14 08:00:15
【问题描述】：

我正在尝试使用剪辑路径从我的 div（蓝色部分）中剪下一个弯曲的形状，但我猜剪辑路径圆圈没有那个选项。我想使用剪辑路径，因为默认情况下它会响应；而不是: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>

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

谢谢。正是我想要的。干杯

【解决方案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>

【讨论】：