How to create a rounded element?
Answered
"use php" posted this in #help-forum
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
@"use php" 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
Let me try this
@"use php" Let me try this
you might need this:
path: `l0,0 c0,0 %firstWidth%,%dividerPercentOfSection% %secondWidth%,%dividerPercentOfSection% s%secondWidth%,%dividerPercentOfSectionMinus% %secondWidth%,%dividerPercentOfSectionMinus% l0,0`,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%);