How to create a rounded rectangle with an Inverted S-curve style in CSS & HTML?

Question

I'm trying to create a design similar to the image attached below 1, where a rounded rectangle has an "S-curve" effect at the bottom. My current strategy involves a parent element (hero_right) with two child elements (hero_right_top and hero_right_bottom). I'm attempting to set the top element to 70% height and the bottom to 30% height, applying borders to create the rounded effect.

Image#1

The problem I'm encountering is with shaping the bottom-left part to achieve the desired S-curve effect. I attempted to set the width of the bottom element to 90%, positioning it absolutely to the right, and then applying border-radius to the corners. I also added a nested div inside the bottom element, using absolute positioning and more border-radius to further shape the bottom left corner, but the result isn't quite right.

Here is the code I have so far:

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

Image#2

My issue is that the bottom left part is not shaping exactly as expected. How can I achieve this S-curve effect properly with CSS? Any advice or adjustments to my approach would be appreciated.

Answer 1

Use a clip-path with an SVG path().

For the below example, I traced the path from the graphics in the question in Affinity Designer, exported an SVG with a single <path>, ran the export through SVGOmg for optimization and tweaked it very slightly in my SVGPathology tool. If the design has been shipped to you in vector form, you don't need to trace it by hand – just move the orange path to the origin of the drawing and export it.

#outer {
  position: relative;
  width: 720px;
}
#orange {
  position: absolute;
  top: 0;
  left: 0;
  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');
}
#blob1 {
  position: absolute;
  top: 0;
  right: 10px;
  background: #111;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  text-align: center;
  font-size: 50px;
  line-height: 1;
  align-content: center;
}

<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 id="blob1">🌍</div>
</div>