Streaming live at 10am (PST)

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:

1 Like

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?