DEV Community

loading...

CSS3 Clip-Path Property.

Swastik Yadav
Writing about Full-Stack web development 👨🏻‍💻 and design. Building ⚒️ products in public || Join me on this venture to create something meaningful.
Updated on ・1 min read

I recently learned about the clip-path property in CSS3.

The clip-path creates a clipping region that sets what part of an element should be shown.

This can help in creating really cool slanted Hero sections. The following CSS code snippet will create a slanted hero background section.

clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
Enter fullscreen mode Exit fullscreen mode

clip-path-image

The polygon shape takes 4 values in a pair of (x y) each for top-left, top-right, bottom-right, and bottom-left.

clip-path-explanation

But sometimes it can be very tricky to create a clipping path. So, here is a really cool tool for generating a CSS clip-path.

https://bennettfeely.com/clippy/

Now, go and create your own clip designs, shapes, and backgrounds.


If you enjoyed reading this little CSS tip then, join my newsletter here. There I share more amazing stuff on web-development.

Thanks a lot for reading.

Discussion (2)

Collapse
shikkaba profile image
shikkaba

Honestly, with that title, I was kinda hoping for an explanation and examples instead of a tool that does it for you.

Collapse
swastikyadav profile image
Swastik Yadav Author

Thanks for the feedback @shikkaba

I will surely update the post with better explanation and examples.