如何在 CSS 和 HTML 中创建具有倒 S 曲线样式的圆角矩形？

Question

我正在尝试创建一个类似于下面所附图像1的设计，其中圆角矩形在底部具有“S曲线”效果。我当前的策略涉及一个父元素 (

hero_right

) 和两个子元素（

hero_right_top

和

hero_right_bottom

）。我尝试将顶部元素设置为 70% 高度，将底部元素设置为 30% 高度，并应用边框来创建圆形效果。

图片#1

我遇到的问题是塑造左下部分以达到所需的S曲线效果。我尝试将底部元素的宽度设置为 90%，将其绝对定位在右侧，然后对角应用

border-radius

。我还在底部元素内添加了一个嵌套的

div

，使用绝对定位和更多

border-radius

来进一步塑造左下角，但结果不太正确。

这是我到目前为止的代码：

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);
}

图片#2

我的问题是左下部分的形状不完全符合预期。如何用CSS正确实现这种S曲线效果？对我的方法的任何建议或调整将不胜感激。

Answer 1

使用 SVG 剪辑路径。

#orange {
  background: orange;
  font-size: 32pt;
  width: 720px;
  height: 750px;
  clip-path: path('M0 89C0 40 40 0 89 0h485a43 43 0 0 1 43 43v8a44 44 0 0 0 43 43h4a52 52 0 0 1 52 52l-2 511c0 51-42 93-93 93H198a90 90 0 0 1-90-90V505c0-26-21-46-47-46h-8c-29 0-53-24-53-53V89Z');
}

<div id="outer">
  <div id="orange">This is in the orange container. This is in the orange container. This is in the orange container. This is in the orange container. This is in the orange container.</div>
</div>