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)
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
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
Great job Eli. I would never think about messing with the border using Viewport Sizes… Smart move!
That’s a solid technique, actually css triangles were always being created kinda like that since the time immemorial 
