Hi guys!
I want to create this shape, and Webflow currently only supports clip path: polygon(), not clip path: path().
clip path: polygon(45% 8%, 55% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 8%)
- → no round corners possible
The “clip path bae” Webflow app doesn’t have round corners either. And copy/paste the SVG Code with ChatGPT is a fail.
How do professionals do it?
Is it really that difficult to have simple shapes as divs in Webflow?
Hey @willipeschel ,
Have you tried setting clip path: path() via the Custom properties for an element? I was testing adding a similar property and Webflow seems to accept such values as well.
Hope this helps.
In my last project I also had to dig into clip-paths because I had to create animated shapes with rounded corners.
I decided to use clip-path: shape() as I needed to animate it and make it responsive.
But in your case, I would use a combination of a div and an SVG for the top-right part. Create a div with rounded corners for all corners except the top-right corner. For the top-right extension, create an SVG (see the screenshot below), place it inside the div and position it using position: absolute and define the width of the SVG with a percent-value so that it scales with the div.
