Creating a Div block with a custom shape entirely through CSS

Achieve this effortlessly with a user-friendly approach-no learning curve involved.
1. Design your shape in ‪@Figma‬ using the pen tool or your preferred method, then export it as an SVG.
2. Head to www.plantcss.com/css-clip-pat...
3. Upload your SVG file and click the convert button.
4. Copy the resulting clip path, consisting of multiple percentage values.
In ‪@Webflow‬ insert an embed block, and within the embed, paste your clip path. Remember to include the clip path within a designated class. Here's an example:
.video_block { clip-path: /* paste the copied clip path here */; }
Connect with me at:
Instagram: / ahmedqayyum32
Twitter: / ahmedqayyum32
LinkedIn: / ahmedqayyum32

[@Alexander-cd9zx]

What would happened if you just upload a picture with that kind of shape in a regular div without a code? Would it turn into a square or would it be the same shape as designed in Figma?

[@ahmedqayyum]

Picture will keep it's shape, but you can compare picture (JPG/PNG) with SVG. They both are totally different formate. SVG is vector, and we can control the width, height, color, and more properties directly from Webflow properties panel.

[@Alexander-cd9zx]

@@ahmedqayyum Thank you for explanation! Hope to see more tutorials from you! :)

[@ahmedqayyum]

Thank you Alexander.