Masking an image in a custom shape

Hi Guys,

I am struggling to find a way to mask my images inside a unique shape, like this:

I have been uploading the images already in that shape as png’s, but just thinking there must be a better way?

Here is my Read-only link:


The example you show can be a div, with radius (round corners) and a background image that you’d rotate too if needed.

But you can use a black and white image to mask an image or a div.

Examples here:


You should search on google how to get specific this shape.
**Anyway, one way is by custom-code and clip-path (Another way is by mask - @vincent answer).

clip-path step1/4:

Add div + class clip-element


Add image inside the div.

step3/4 add embed code html:

  -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);

Step 4/4 - size issue

Declare the size of the div (Or put image inside the div with opacity of zero ==> like this - div size = image size).

set image opacity to zero

set the same image as a background image position cover center-center

Why? Because this trick works better with background-image.

Get more paths - try this tool:



I gave it a go and it works! Will need to play around a bit to get the exact shape I want, but the principal works perfectly.

Thanks for the detailed feedback!


Thank you! checking it out.

1 Like

Would it be the same technique if you wanted create a custom shape for the slider mask?

This works for videos as well.

I still have a problem though. I am not working with a polygon or any given shape but an svg.
It is already masking. I created the shape with

Somehow I can’t center it and I can’t change the size. I would like it to be much bigger. I just got the points from blobmaker for the shape and would like to blow it up now to the size I want it.

(it’s in the section “red sea” and I called it clip-element)

Do you have an idea what I am doing wrong?

@RonnieBester I think I came up with a solution for custom SVG shapes. Please have a look: