Let's Do This In Webflow

So my designer and I are building our friends brand’s new website and my designer came up with this mock-up. I am talking about the triangle images stacked on top of each other. Somehow I need to make this responsive while keeping the design split. The 2 images on top of each other are probably the easiest part. But on the “lookbook” page there is a 3rd triangle introduced. I don’t want to just scrap the idea because I really like it and want to be able to use something like this in my portfolio. Let me know what you think I am down to brainstorm :brain::muscle:

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

easy :wink:

CSS triangle + Background images

it may still be a bit tricky, but not impossible

But will I be able to have the background images and also keep the borders are 100% width?

hmmm… experiment with it and see what do. :thinking:

If I try to make the top and left border 100% width or even 50% width it only give this outcome.


I made it 600px and this happened. Can’t tell if I am closer or further away haha. But, making the border a pixel number instead of a percentage wont make it responsive.

EDIT 2: using 100vw and 100vh seems to be the trick but I still can’t add the background image

So I can get 1 background image at a time but I am unable to get both to show at the same time. Any suggestions?

SO! I figured it out haha. I’m gonna post my process in case anyone else wants to do this sort of thing. I used clip-path to get the result so there is a tiny bit of code involved and there is slightly limited browser support but in general, it works well.

So I have a background wrapper set to 100vh and position relative. Inside the wrapper, I have 2 divs. Top image and bottom image.


The top image is set to position absolute: full. Make the background image of this div whatever you want the top image to be.

The bottom image is just set to 100vh so that it fills the screen height.


Lastly, In the page header code add the following code:

.bottom-image {
 -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
clip-path: polygon(100% 0, 0 100%, 100% 100%);

And that’s it! Publish the site and you’re all set.

This was a pretty simple solution to what I thought would be a harder problem!
I hope this helps anyone trying to do something similar!!