Streaming live at 10am (PST)

Let's Do This In Webflow


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


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.


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.

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>

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