剪辑路径弧形

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>

剪辑路径弧形

Clip-path arc shape

javascript

html

css

sass

clip-path