Streaming live at 10am (PST)

How can I do a responsive background?

As shown in the image, the upside-down grey triangle starts from the upper two corners of the screen. So it must display like that on all screen size & device variations. How can I do it?


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

1 Like

Hello @RohanGanachari

Can you share your read-only link?

Piter :webflow_heart:

Here it is: https://preview.webflow.com/preview/v-and-theworld?utm_source=v-and-theworld&preview=ef4b607227708dab649e2349cabbe713

I didn’t share it earlier because there’s nothing to show/share. I try and I delete. At the moment, I’m just scratching my head over it.

Hi Rohan,
I saw your post yesterday and wondered if this is even possible… tried a few ways including svg starched to 100VW and 100VH but no luck.
Woke up tis morning with a solution… lol

Create a div and set to 100VH. Give it upper border line of 100VH with the desired color for the triangle. Right and left border line of 50VW each with white color.
That’s it!

Here’s an example:

Hope this helps


Great job Eli. I would never think about messing with the border using Viewport Sizes… Smart move!

1 Like

That’s a solid technique, actually css triangles were always being created kinda like that since the time immemorial :smiley:

1 Like

Thank yo so much, @Eli11!
This helped me bring my design to life. You made my day… :smiley:

1 Like