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.