剪切路径弧形

Question

我正在尝试使父div的伪元素形成弧形，我正在尝试通过使用clip-path实现此外观，这是我追求的外观的简化示例：

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

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>