Let's Do This In Webflow

Design help General
1

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:

Web-Home-%20Closed%20Tabs
Web-Home-%20Closed%20Tabs960×540 766 KB
Mobile%20Home-%20Closed%20Tabs
Mobile%20Home-%20Closed%20Tabs560×995 766 KB
Web-Look%20Book-%20Closed%20Tabs
Web-Look%20Book-%20Closed%20Tabs640×720 646 KB
Mobile-Lookbiook-%20Closed%20Tabs
Mobile-Lookbiook-%20Closed%20Tabs600×1067 819 KB

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

2

easy :wink:

CSS triangle + Background images

it may still be a bit tricky, but not impossible

3

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

4

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

5

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

https://preview.webflow.com/preview/elevated-dreams-ddae20?preview=44a1105dbf640088e50cfe1ec35cb3d4

EDIT:
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

6

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?

7

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.

650af14d2d02ffb5fda516c293d354ce
650af14d2d02ffb5fda516c293d354ce1366×639 441 KB

07843a9167bc9b19e9df63d0eb059a50

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

37f13372716909ce3722172564a288c0
37f13372716909ce3722172564a288c0240×546 6.47 KB

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

fc4bf75251b960956ba5066ad3f50406

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

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

f1925dddee83aae7e97322d667c96e8a
f1925dddee83aae7e97322d667c96e8a1366×632 151 KB

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!!

3 Likes