How to fill shapes with images in 5 minutes

Shapes are a common feature of contemporary websites. They can be used to add emphasis, for branding purposes, visual effects and much more.

On their own they’re relatively easy to use - just create your shape in Figma or Photoshop, export it and then add it to your website. But what if you wanted to have an image in the shape? This is where it starts to get tricky.

Adding shapes to websites

There are two methods that I’ve used and I’ll start with the easier one.

Clippy shape generator

Clippy is a clip path generator that lets you pick a default shape and then alter the corners to generate a clip path. It outputs CSS clip path code which you can then use in your CSS to alter the shape of the image.

Just like that, you’re done! But wait, there are a few problems here…

1. If you don’t have the exact clip path coordinates from the design you’ll have to do some guesswork to create the desired shape.
2. If your shape includes smooth and rounded edges you’ll have an absolute nightmare trying to create this manually.

So clippy works well for simple shapes but you’ll need a different approach for more complex layouts which have smooth and sharp edges.

SVG ClipPath

ClipPath is an SVG element that defines the clipping path to be used by the clip path property

Ok, there was a lot of clips and paths in that sentence so lets break it down in a few steps:

1. Create your desired shape and export it as an SVG.
2. Find the path coordinates, often starting with d=”M0.5,0 l0.354 …” (these are example coordinates - see Figure 2).
3. Paste the coordinates into Yoksel's relative clip path generator under the top section labelled “Insert clip-path coordinates for userSpaceOnUse:” (if you have multiple paths then just paste them in order - see Figure 3).
4. Add the resulting CSS to your styles and the HTML to your page (Figure 4).

This code adds an image to the background property of your CSS class selector which targets the div with the class of .clipped (Figure 4)

ClipPath and .clipped are connected using the clip-path (and -webkit-clip-path) properties which maps the id of the clip shape to the output div.

That’s it! Now you can create very complicated image shapes without having to calculate everything yourself.

Conclusion

Our preference for more complex shapes would be ClipPath but if you need to set up a simple shape quickly the Clippy is an amazing tool.

If you want to learn more about clip path visit https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

You can see a live example of this in the Viking CSS website on the homepage if you navigate to the section that says "helping the humber region".

References

ClipPath Mozilla docs

- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

Clippy

- https://bennettfeely.com/clippy/

Yoksel relative clip path generator

- https://yoksel.github.io/relative-clip-path/

Viking CSS website

- https://www.vikingccs.co.uk/