Streaming live at 10am (PST)

How to add angles on divs

Is it possible to add angles on divs similar to what you see on the desktop version if this site >> Anime Matsuri <<

For instance, at the very top, overlaid on the slider, there are 4 sections with icons and they each have tops and bottoms at different angles. Also, the section titled “Meet our 2020 Guests” has a peak at the top of the div and so does the following div with social media icons.

I’m looking at the code in the inspector but I can’t seem to get my head around it. I would like to have divs with angles at the top similar to these. Is this possible to recreate in Webflow?


You can do this on a div by using a Rotate transform and defining a perpective. As the text has no deformation, you need to make this on a separate element (ie the element can’t be the parent of the text).

Start by creating your cells with the text inside of it, make the cells Position:relative. Then add a div as siblings as the text. Make the div absolute and 100% width and height.

Make a Rotate transform on x on the absolute div, and set its self perspective to 2000.

Now you got to adjust the dimensions and position of the divs for them to go side by side.

You can also put the text as child of the div so that it’s in 3D too.

Check here:

https://preview.webflow.com/preview/sbx?utm_medium=preview_link&utm_source=designer&utm_content=sbx&preview=3ec033cabc671d9aed325632b7d7daa3&mode=preview

2 Likes

Thank you for taking the time to work on this. Am I able to do this as well on a slider, where only the bottom left or bottom right corner is dropped lower, nothing more?

Something like this:

A cheat sheet for shapes using CSS: https://css-tricks.com/the-shapes-of-css/

A nice visual explanation is located at this page: https://css-tricks.com/snippets/css/css-triangle/

1 Like

For just that you’re better off using a SVG mask.

1 Like

so, after plugging away at the code from the other site, I figured this out and it works for what I need, although IDK if it’s correct as far as coding goes. Playing around with a div above or below the main content, messing with border size, and margin, etc. I was able to create caps at the end of divs that I can use to make the angle I’m looking for.

Test site here >> https://preview.webflow.com/preview/angled-divs?utm_medium=preview_link&utm_source=dashboard&utm_content=angled-divs&preview=63efc410a1d5bc985f7fdb4785db7cfb&mode=preview <<