剪辑路径弧形

Question

我正在尝试制作父 div 的伪元素的弧形，我正在尝试通过使用剪辑路径来实现这种外观，这是我所追求的外观的简化示例：

我在当前标记中可以更改的内容有点有限，背景颜色是动态的，这就是为什么我需要在伪元素中继承它并且整个容器中还有背景图像。这就是为什么我试图用伪元素和剪辑路径来做到这一点。这是我尝试过的：

div {
  position: relative;
  background: rgba(0,0,0,0.5);
  height: 100px;
  width: 100px;
  margin: 100px auto;
}

div:before {
  content: '';
  position: absolute;
  z-index: 2;
  height: 50px;
  width: 50px;
  right: -50px;
  bottom: 0;
  background: inherit;
  clip-path: polygon(0 100%, 0 0, 3% 15%, 6% 27%, 11% 34%, 19% 43%, 26% 53%, 35% 63%, 46% 71%, 54% 77%, 65% 83%, 70% 86%, 81% 91%, 91% 95%, 100% 100%);
}

<div></div>

但是您可以看到它远非完美，您可以看到点并且没有那种平滑的弧线外观。我正在使用 SCSS，我也愿意接受任何 JS 建议。

Answer 1

这是mask的工作：

div {
  position: relative;
  background: rgba(0,0,0,0.5);
  height: 100px;
  width: 100px;
  margin: 100px auto;
}

div:before {
  content: '';
  position: absolute;
  z-index: 2;
  height: 50px;
  width: 50px;
  left:100%;
  bottom: 0;
  background: inherit;
  -webkit-mask:radial-gradient(farthest-side at top right,transparent 99%,#fff 100%);
          mask:radial-gradient(farthest-side at top right,transparent 99%,#fff 100%);
}

<div></div>