Streaming live at 10am (PST)

Is it possible to angle only one side of a div?


#1

Hi all, is it possible to skew / angle only one side of a div? I know the transform will allow me to angle a div but all sides get altered using that method.


#2

Not natively in the Webflow GUI.You could hand code it and inject or embed the CSS.

https://css-tricks.com/examples/ShapesOfCSS/


#3

Just out of interest I'm wondering what you're trying to achieve as there 'might' be a better / easier way of getting what you want?

Best wishes,

Mark


#4

I want to easily be able to create angled sections like you see on this site: http://www.vibrantcomposites.com/


#5

These are angled sections (transform -25 deg) with a position: absolute. So the content is placed and positioned on top of the transformed sections. They did a nice job positioning all the elements. For the smaller screens the sections are not rotated. This can all be done in Webflow in my opinion.


#6

Aha!

I'd thought that perhaps that was the sort of thing that you were after somehow, just wanted to check first though in case not.

As rich_art has said they've just transformed them although you could also do this with background images (preferably SVG's to retain sharpness) or you can even get angled backgrounds by using a DIV and using some clever settings on the borders to get an angled look.

The two different grey DIVs here were made just by using some clever settings on the borders of the DIVs.

Best wishes,

Mark


#7

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