This content originally appeared on DEV Community and was authored by Swastik Yadav
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%);
The polygon shape takes 4 values in a pair of (x y) each for top-left, top-right, bottom-right, and bottom-left.
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.
I also help beginners to Learn CSS in a 7 days workshop without the tutorial hell, with 8020-CSS.
Thanks a lot for reading.
This content originally appeared on DEV Community and was authored by Swastik Yadav
Swastik Yadav | Sciencx (2021-07-06T15:18:54+00:00) CSS3 Clip-Path Property.. Retrieved from https://www.scien.cx/2021/07/06/css3-clip-path-property/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.