Diagonal Containers in CSS (codyhouse.co)
4 years ago from CodyHouse Ltd, CodyHouse
4 years ago from CodyHouse Ltd, CodyHouse
or you could do this https://codepen.io/parkerhutchinson/pen/xepPKd and it would be cross browser compatible. because clip-path polygon is not supported in IE or edge browsers only url option for clip-path.
Hey Parker! In the video I go through the skewY option and why it's no ideal in my case (I want to apply a bg image, that would be distorted by the skew transformation. Also, there would be an issue with the bg color of the section beneath the hero). If no bg image is needed, then sure, skewY is a good option.
You could always apply the background image to a pseudo element and reverse skew it.
Edit: oh, I just looked at Parker's codepen which only skews the background. I would skew the entire container, then reverse skew the direct child element containing the text content and reverse skew the pseudo element containing the background image.
exactly.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now