Irregular CSS divs/shapes

Is it possible to create irregularly shaped divs in webflow like this? I would also like to animate them with webflow. Appreciate any ideas or pointers.

I did find this (Clippy), but I’m not sure how to implement.

Thanks in advance!

This isn’t possible natively in the designer but custom code (like what you’ve linked) can be used to extend functionality.

To get it working on your site, you can put this content within the custom code section in the site settings and make sure you reference the same class or id of the element you want to affect. A good tip is to include this code within an Embed element on the page you’d like it to appear and the changes will render in the designer before publishing the site.

Let me know if you run into any issues and I’d be happy to render out a quick video to illustrate how it’s done. Cheers!

1 Like

Thanks @mikeyevin I figured it out. In case anyone else wants to know, below is the code format you need for webflow. This took me a minute to figure out. Just change “shape” to name of the div in webflow. And you can use the clippy link above to create a custom shape.

<style>
.shape {
clip-path: polygon(0% 0%, 16% 2%, 39% 0%, 83% 4%, 100% 0%, 100% 24%, 98% 48%, 100% 75%, 100% 100%, 75% 97%, 45% 100%, 1% 100%, 7% 81%, 0% 56%);
}
</style>
1 Like