What’s the best approach to create such a shape?
Unanswered
Braconid wasp posted this in #help-forum
Braconid waspOP
I’m working on a landing page design that includes a custom-shaped container (see attached image for reference) What’s the best approach to creating and styling such a shape using modern CSS or other techniques? Would love any code examples or tips on keeping it clean, maintainable, and flexible.
Should I leverage CSS clip-path, pseudo-elements (like ::before/::after), or perhaps an SVG background?
Thanks in advance!
Should I leverage CSS clip-path, pseudo-elements (like ::before/::after), or perhaps an SVG background?
Thanks in advance!
1 Reply
@Braconid wasp I’m working on a landing page design that includes a custom-shaped container (see attached image for reference) What’s the best approach to creating and styling such a shape using modern CSS or other techniques? Would love any code examples or tips on keeping it clean, maintainable, and flexible.
Should I leverage CSS clip-path, pseudo-elements (like ::before/::after), or perhaps an SVG background?
Thanks in advance!
I remember seeing a simpler, maintainable example using mask-image. The image you add is full, but the box containing the image would have the desired shape, allowing for this type of custom container. You could place it completely behind the background and have the content on top (you'd have to manage the content structure yourself).
check this example:
https://youtu.be/FCuNtCq3nRg?si=wpkta1AAqOubZm5C&t=232
docs: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image
check this example:
https://youtu.be/FCuNtCq3nRg?si=wpkta1AAqOubZm5C&t=232
docs: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image