Section shaping

Hi! Trying to decide whether to switch to webflow. Trying to achieve in webflow what I made on wordpress with Revolution Slider (see jpg). Site is not up yet.

The top section has a wide arrow shaped bottom and is filled with video. I tried the single slanted div trick and that works but it’s not what I want. As you can see I also want to do a dot overlay and the “adapt or die” types in and the cursor keeps blinking. Need to find a way to do that in webflow too.

I was looking at this Webflow site for help but couldn’t figure out how to do it or apply the examples to what I need: https://webflow.com/website/Forum-Help2 and http://arthurplayground.webflow.io/. The author said tutorials were coming but that was a year ago. Thanks for any help!

You should be able to do all this. Just create a div with the background of the image above. You can then use an overlay from here (or one you have):
http://html5backgroundvideos.com/pattern-overlays/

The arrow could be an image added to the div.

From there you could create an image with the curve you want (top of that image transparent), bottom (solid/brick).

Once you start working, prove a read-only share link if you run into issues.

Hi Joe! Thanks for getting back to me! The dots overlay I understand. But I don’t understand–"create a bkgd with the image I provided? The bkgd of the div (I thought it was “section”) would be video. I think perhaps you misunderstand what i mean by “arrow”–not the little yellow arrow at the bottom, I mean the shape of the whole bottom of the div is a very wide down pointing arrow or “V” shape, if you can see it where it adjoins the brick. The brick by the way would be the parallax bkgd of another section so as you scroll it rolls out from under the video above. If i can figure this out I’d then have to find out how to do a typewriter effect.

The div isn’t curved. There must be an overlay/graphic or CSS that is creating the curve on the bottom of the image. You would need to create an image or inspect the page where you have this and see what CSS is creating that part.

Possible CSS (Video in a div, with additional divs at bottom housing this V):

Typewriter effect:

Webflow site that implemented typewriter effect:
https://preview.webflow.com/preview/sunlightis?preview=8abef7ba7504e335a361cf895e37a4dd

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.