Need help in tricky css design
As part of my practice, I am currently working on a CSS challenge that involves a particularly tricky design. I have attached an image of the design I am trying to achieve. Despite my best efforts, I have been unable to replicate it successfully.
I would be immensely grateful if any one could provide some guidance on how to achieve this specific design. Your expert advice would be invaluable in helping me overcome this challenge.
4 Replies
I suspect that there would be several ways that you could achieve this.
One method would be to use a clip path on the content.
As proof of concept I threw together a quick demo, which no doubt could be improved upon, to demonstrate how this could be done.
https://codepen.io/cbolson/pen/ZEdeEZb
Note - I created the clip-path manually and I am not convinced that it is very accurate. Hopefully somebody with a better control over paths could improve it.
Hey Chris,
Thanks so much for your help with my CSS challenge! The clip-path demo you shared on CodePen works perfectly and matches exactly what I needed.
Your advice was spot on, and I really appreciate you taking the time to help me out.
Thanks again!
Thats good to know, Michael.
I was thinking about this a bit and actually think that it might have been better to add the curved part as either an inline SVG or as a pseudo element before the "main" content as, with the clip-path solution the path needs to be adjusted to ensure that it doesn't actually cut-off content if the card gets wider or taller.
Anyway, if this worked for you, then great 👍 I'm glad to have been able to help.
Hey Chris,That's a great point about the curved part and the potential issue with the clip-path if the card dimensions change. Using an inline SVG or a pseudo element sounds like a solid alternative.I'll definitely keep that in mind for future designs. For now, the clip-path solution you provided works perfectly for my current needs.Thanks again for your help and the additional tips!