How to create a rounded element?
Answered
Anay-208 posted this in #help-forum
Anay-208OP
Here's what I want to achieve, This is a minimum Example: https://www.figma.com/design/4W0Kt4NfZ0WaSLAqY2T6HH/Untitled?node-id=0-1&m=dev
I tried using, https://9elements.github.io/fancy-border-radius/
However, It didn't work well, I've attached a screenshot of the results
I tried using, https://9elements.github.io/fancy-border-radius/
However, It didn't work well, I've attached a screenshot of the results
Answered by B33fb0n3
you can do that by only adding this small line up (see attached). The rest are just background colors of two sections.
Either do it like this ^
Or you can use
Or a combination of both
Either do it like this ^
Or you can use
clip-path, that can cut specific parts from the section, to cut it like thisOr a combination of both
7 Replies
Anay-208OP
@Anay-208 Here's what I want to achieve, This is a minimum Example: https://www.figma.com/design/4W0Kt4NfZ0WaSLAqY2T6HH/Untitled?node-id=0-1&m=dev
I tried using, https://9elements.github.io/fancy-border-radius/
However, It didn't work well, I've attached a screenshot of the results
you can do that by only adding this small line up (see attached). The rest are just background colors of two sections.
Either do it like this ^
Or you can use
Or a combination of both
Either do it like this ^
Or you can use
clip-path, that can cut specific parts from the section, to cut it like thisOr a combination of both
Answer
Anay-208OP
Let me try this
@Anay-208 Let me try this
you might need this:
path: `l0,0 c0,0 %firstWidth%,%dividerPercentOfSection% %secondWidth%,%dividerPercentOfSection% s%secondWidth%,%dividerPercentOfSectionMinus% %secondWidth%,%dividerPercentOfSectionMinus% l0,0`,Anay-208OP
So I used these classes:
&
bg-primary h-24 w-screen relative before:content-[''] before:absolute before:-top-12 before:h-12 before:w-[125vw] before:left-1/2 before:-translate-x-1/2 before:bg-primary &
// ::before
clip-path: ellipse(50% 100% at 50% 100%);