Streaming live at 10am (PST)

How can I do a responsive background?

#1

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

Hello @RohanGanachari

Can you share your read-only link?

Piter :webflow_heart:

#3

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.

#4

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

Solution:
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:
https://preview.webflow.com/preview/form-help23?utm_source=form-help23&preview=33f565ae509690f17011a6ad64302e27

Hope this helps
Eli

5 Likes
#5

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

1 Like
#6

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

1 Like
#7

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

1 Like