This is the way skew works. In order to understand this, I am going to simplify the question to :
why isn't skewX(40deg) the same as skewX(20deg) skewX(20deg)?
You can use a rotated container with overflow hidden.
This will allow you to display those images over an other image a gradient or any other non plain background :
You can use a skewed Y pseudo element as a background of the element. This won't affect the content :
padding: 20px 50px;