Landing page diagonal division with text on the left and an image on the right?

Hi everyone! Quick question, how could I replicate this landing page diagonal division with text on the left and an image on the right? I’m aware that image is not cut but just masked somehow into that shape. This is the link! Online Ordering System | Ritual

Any ideas? Looking forward to hearing!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

On your example website, a pseudo element ::after is used to add an element over the photo. So it’s like a div, rectangle by default, and it’s positionned on the left -20%, absolute. it’s also skewed with Transform for the oblique effect.

In Webflow, you can add a div on top of your photo, skew it with transform and position it where you want.

Thanks Vincent! I’ll give it a try.

There’s a TON of different solutions for that. You could also use a vector svg shape to mask the whole image, for example.