DEV Community

Swastik Yadav
Swastik Yadav

Posted on • Edited on

3 1

CSS3 Clip-Path Property.

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.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (2)

Collapse
 
shikkaba profile image
Me

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

Thanks for the feedback @shikkaba

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