Design comparison
Solution retrospective
My first approach to the curved pattern in the first two sections was to copy the patterns from the figma file and use picture + source + img to implement it. Then I thought it would be overkill and should there be a simpler way. I experimented clip path, it was too hard and I don't know if is worth to learn svg paths to use with the css path() function.
Then I remembered that border-radius 50% creates an ellipsis curve with rectangles (this is why tailwindcss implements rounded-full with border-radius: 99999px). I went to investigate that and only then I realised that border-radius can get two arguments. With that information I could figure out a solution using border-radius.
Community feedback
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