Diagonal Containers in CSS(codyhouse.co)

over 4 years ago from CodyHouse Ltd, CodyHouse

  • Parker Hutchinson, over 4 years ago

    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.

    2 points
    • Sebastiano Guerriero, over 4 years ago

      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.

      0 points
      • Matthew SmithMatthew Smith, over 4 years ago

        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.

        3 points