This is a little more complicated than using methods like circle, polygon or others. Clippy is a great tool if you need to clip a more basic shape.
We can either clip a background-image or an img element. Though I’ve used the background-image on the CSS For Designers home page, the img element technique is often more appropriate for client work because it:
Allows content editors to change the image
Lets content editors specify alt text
Plus you retain all the other benefits of using an SVG clip-path rather than saving a pre-cut PNG/JPG image (smooth edges, file size, etc).
Let’s get into it.
First of all, we need an SVG. Here’s what we’ll use:
In the article, Chris Coyier explains an issue with SVG-defined clip-paths, where they remain fixed in the upper-left of a document.
In my (brief) testing on Firefox, Safari and Brave (Chromium), I couldn’t replicate this so this may not be an issue on more recent browsers (the article was last updated in 2016). That said, there was a difference in how Safari rendered the SVG.
Scaling the clip-path
Ideally, we want the SVG clip-path to scale with the image. To do this, we add clipPathUnits="objectBoundingBox" to the clipPath in our HTML: