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: https://preview.webflow.com/preview/mark-seuring-physiotherapy?utm_medium=preview_link&utm_source=designer&utm_content=mark-seuring-physiotherapy&preview=5a920221d6947a294f67b578484bea54&mode=preview

Thanks,

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: http://clipping-masking.webflow.io/

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).
https://css-tricks.com/almanac/properties/c/clip/

clip-path step1/4:

Add div + class clip-element
image

step2/4

Add image inside the div.

step3/4 add embed code html:

<style>
.clip-element{
  -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
</style>

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
image

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

Get more paths - try this tool:
https://bennettfeely.com/clippy/

2 Likes

Awesome!

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!

2 Likes

Thank you! checking it out.

1 Like

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