In an attempt to replicate the design showcased in the image provided via link, I am working on creating a rounded rectangle with an "S-curve" effect at the bottom. To achieve this, my current approach involves utilizing a parent element (hero_right) with two child elements (hero_right_top and hero_right_bottom). The idea is to set the top element to 70% height and the bottom element to 30% height, while applying border properties to create the desired rounded effect.
https://i.sstatic.net/jtrmBiEF.png Image#1
The challenge lies in shaping the bottom-left portion to achieve the intended S-curve effect. Although attempting to set the width of the bottom element to 90%, positioning it absolutely to the right, and then implementing border-radius to the corners, the outcome isn't quite as expected. Furthermore, adding a nested div inside the bottom element with absolute positioning and additional border-radius doesn't yield the desired result.
This is the code snippet I have worked on 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);
}
https://i.sstatic.net/JpoRErr2.png Image#2
The issue persists as the bottom-left part does not shape precisely as intended. Seeking guidance on how to effectively achieve this S-curve effect using CSS. Welcome any suggestions or modifications to enhance my current approach. Thank you.