Generate inverted arc with clip path

Question

How can I achieve an inverted arc using clip path?

My current code.

.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

you can use something like this:

.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>