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
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/
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).
Add div + class
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.
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 https://www.blobmaker.app/.
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?