使用裁剪路径生成倒圆弧

Question

如何使用剪辑路径实现倒圆弧？

我当前的代码。

.container {
  width: 60px;
  height: 60px;
  clip-path: path("M 0 60 Q 0 0 60 0");
  background-color: blue;
}

<div class="container"></div>

Answer 1

你可以使用这样的东西：

.container {
  width: 60px;
  height: 60px;
  clip-path: path("M 60,0 H 0 V 60 C 0,30 30,0 60,0 Z");
  background-color: blue;
}

<div class="container"></div>

Generate inverted arc with clip path