如何用CSS和HTML创建带反向S形曲线的圆角矩形？

我想要创建底部带有“S形曲线”效果的圆角矩形，目前用hero_right作为父容器，包含hero_right_top和hero_right_bottom两个子元素，通过设置高度和border-radius来实现，但左下角的反向S形曲线始终做不对。尝试过把底部元素宽度设为90%并绝对定位到右侧，还嵌套了hero_right_bottom_link调整形状，效果都不符合预期。

当前代码 #

HTML #

<div className='hero_right'>
    <div className="hero_right_top"></div>
    <div className="hero_right_bottom">
        <div href="#" className="hero_right_bottom_link"></div>
    </div>
</div>

CSS #

.hero_right {
    position: relative;
    display: flex;
    flex-direction: column;
}

.hero_right_top,
.hero_right_bottom {
    min-height: 71.5%;
    width: 100%;
    background-color: var(--thirdColor);
}

.hero_right_bottom {
    min-height: 30%;
}

.hero_right_top {
    border-top-right-radius: 100px;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.hero_right_bottom {
    position: absolute;
    width: 90%;
    right: 0;
    bottom: 0;
    border-bottom-right-radius: 100px;
    border-bottom-left-radius: 100px;
}

.hero_right_bottom_link {
    position: absolute;
    top: 0;
    left: -3%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    text-decoration: none;
    color: var(--primaryColor);
    width: 60px;
    height: -webkit-fill-available;
    border-top-right-radius: 158px;
    background-color: var(--whiteColor);
}

优化方案 #

多层嵌套+绝对定位容易导致布局冲突，建议简化DOM结构，用单个父元素配合实际元素（或伪元素）实现S形曲线：

调整后代码 #

HTML（React写法）

<div className='hero_right'>
    {/* 可选：放置内容 */}
    <a href="#" className="hero_right_link">链接文本</a>
</div>

CSS

.hero_right {
    position: relative;
    width: 300px; /* 根据需求调整宽度 */
    height: 400px; /* 根据需求调整高度 */
    background-color: var(--thirdColor);
    /* 设置顶部左右、右下角圆角 */
    border-radius: 100px 100px 100px 0;
    overflow: hidden; /* 隐藏超出容器的元素 */
}

.hero_right_link {
    position: absolute;
    bottom: 0;
    left: 0;
    /* 曲线宽度，对应原设计中的链接宽度 */
    width: 60px;
    /* 高度 = 容器高度 - 底部圆角半径，让曲线贴合底部 */
    height: calc(100% - 100px);
    background-color: var(--whiteColor);
    /* 反向S形曲线的圆角 */
    border-top-right-radius: 100px;
    /* 居中链接文本 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--primaryColor);
}

核心思路 #

1. 父元素直接设置border-radius: 100px 100px 100px 0，一次性搞定顶部左右和右下角的圆角
2. 用链接元素实现左下角的反向S形：通过border-top-right-radius创建右凸曲线，再用height: calc(100% - 100px)让元素底部刚好贴合父容器的右下角圆角，形成完整的S形
3. overflow: hidden确保链接元素不会超出父容器范围，避免布局混乱

如果不需要可点击的链接，把hero_right_link换成伪元素即可：

.hero_right::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: calc(100% - 100px);
    background-color: var(--whiteColor);
    border-top-right-radius: 100px;
}

内容的提问来源于stack exchange，提问作者Tahir Musharraf