Design comparison
Solution retrospective
How would you done that curvy background ? i had hard time doing that :). Still not happy with the way i did.
Community feedback
- @xtirianPosted over 1 year ago
Hello, @Sazzadur.
This curvy background was really difficult to me too.
The best way I found to represent that was using a different element with the who inherit the color of his parent with width 100%. In the CSS I use the relative position to position in the bottom of the parent. The curve pattern I use this code:
.ellipsePattern { background-color: inherit; width: 100%; height: 4em; bottom: -4em; left: 0; clip-path: ellipse(60% 100% at top center); <----- position: relative;
This was very difficult to reach that solution because it's unusual to do such curve. You can read more about here, if you wanna try: Mozzilla docs
This function is like this ellipse ( "How curve you want relative to his own size", "Size that starts the curve" at "Position")
Hope this helps you!
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord