Clip Your Images with CSS clip-path

CSS clip-path in action

I used to try to clip images using the CSS clip property, but that was so difficult that I typically gave up and got out my image editor. What is the point of spending four hours trying to force an image to clip in CSS when I can do the same thing in Acorn in less than five minutes? But now that clip is deprecated, I don’t have to use it anymore. But better yet, the new CSS clip-path property works so much better!

The clip-path property includes features like:

  • You can apply it to any element, not just absolutely positioned ones
  • You can use SVG to define the clipping path
  • It actually works!

That last one is the kicker. Yes, I know the clip property worked too. But it was so hard to use that it might as well have not worked. As I mentioned above, I could spend hours just trying to get the image cropped the way I wanted it to. And I’m not talking about minor adjustments. I’m talking, I would attempt to clip the upper left corner, and the clip property would cut out something in the lower right. WTF?!?

So when I started playing with the CSS clip-path  property I didn’t have high hopes. I figured at best it would be a little easier to use. Five minutes later I had clipped exactly the portion of the image I wanted, clipped it in a circle shape (not a rectangle!) and placed that circle on my web page.

CSS hooked me again!

So, since, like the image-set() notation, I thought this was super cool. I decided to create a video for you. The video covers how to create a rectangular clipping path for an image step-by-step. I also give you a tip about a site (Clippy CSS Clip Maker) that will help you create your own clipping paths.

Watch My CSS Clip-Path Video

Leave a Reply

Your email address will not be published. Required fields are marked *

4 + 17 =