0

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.

enter image description here 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);
}

enter image description here 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.

Improve this question
2
  • I tried to run the code in your question, but get nothing like what you show in your image. I replace missing color variables, but it still shows nothing. Are you using something that's not included in your question? Why not test the code you publish first, and maybe use a code snippet, like in the answer below, so we can directly see what it does? (I didn't downvote your question by the way, downvoters rarely say why they do that.) Commented Sep 11, 2024 at 12:04
  • See also "How to create a smooth, curved SVG mask for a block's top-right corner?" Commented Sep 11, 2024 at 13:46

1 Answer 1

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

How did you create the clip path? Did it fall out of the sky? 😐
@KIKOSoftware Kind of. I spent 3 minutes tracing OP's graphics into a path in Affinity Designer, ran the SVG export through SVGOmg and tweaked it in my SVGPathology.
I think that explanation should be part of your answer. You do realize that your code is completely unresponsive? Which is fine because the question doesn't mention this, but the code in the question probably is.
@KIKOSoftware Yes, I know it's not responsive. One can use the tricks from this answer to make a path() clip-path responsive.
But sure, good point about adding the tooling and a couple more refs to the post itself, did that. 👍
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.