在容器上创建居中的半圆形切口

Question

我想在这个网站上制作一个剪贴画：https://newspring.cc/about 除此之外，我想将切口变成半圆形。我已经从询问如何制作完整的容器切口的问题中读了很多答案，但没有这样的。我已经尝试了好几个小时来弄清楚，但我无法想知道是否有人会如此善良地向我提供他们的一些知识。 谢谢！

Answer 1

这是你要找的吗？

Demo

HTML

<div></div>

CSS

div {
    background-color: red;
    width: 300px;
    height: 100px;
    border-radius: 50% / 100%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

background-color，width和height可以是您喜欢的任何内容。