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

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 可以是任何你喜欢的。