Clip-Path CSS

Those of you that know me, know that CSS is my biggest weakness. I tend to use styling libraries in my projects to make up for my lack of CSS skill, unless the project requires me to do otherwise. So when I come across new tricks, I get really excited!

Here is a new one for me. The “clip-path” CSS property. With clip-path, you can choose which parts of an element are shown based on methods within the property, and by using x/y coordinates.

Here is the header I had to make for a custom webpage. Notice the polygon shape. This is actually a full square image that I had to clip out to get this shape and keep it responsive. And that’s when I found “clip-path”. So cool!

In the header example above, I’m using the polygon value of the clip-path property to get my desired shape. Inside, each element is simply an x/y coordinate. They basically just act as pointers. So from left to right: “0, 0” starts at an untouched x/y coordinate, next would be “100% all the way over for X and nothing done to Y”, then “100% X and down 75vh for the Y coordinate” which is what gives us that clip effect just a little bit above the very bottom of the picture, and lastly “0 all the way to the beginning of X and 100% all the way down to the bottom of Y”. Anything within those 4 pointers is shown, while anything outside of the pointers is clipped off. Perfect!

Above is a listing from the MDN Docs which shows some of the values we can toss onto our clip-path property. As you can see, I used the polygon() value to get my shape. Also, included below is a cool handy dandy tool you can use to generate the code for your own custom shapes whenever you need them.

Happy clipping everyone!!