如何创建删除象限的圆角矩形？

Question

该形状是一个带圆角的矩形，但其中一个矩形象限已被删除，并且该象限的所有角都已被平滑。 示例 1 示例 2 我想在 HTML 中构建这个圆形形状。盒子的尺寸可能会根据其内容而有所不同。

我知道我们可以通过将此形状包含为图像来实现此目的，但是我希望有任何 CSS 代码。

Answer 1

创建一个带有象限的圆角矩形非常简单。 我列出了一个简短的代码，可以满足您的要求，但同时我建议您，根据您的确切尺寸和曲率要求、html 中的 div 名称等，此代码可能需要您进行一些调整。

<div class="rounded-box">
    <div class="cutout"></div>
</div>

.rounded-box {
    position: relative;
    width: 300px;
    height: 150px;
    background-color: green;
    border-radius: 20px;
}

.cutout {
    position: absolute;
    width: 200%;
    height: 200%;
    background-color: white;
    top: -75%;
    right: -75%;
    border-radius: 50%;
}

我希望这能解决您的疑问。