Faire des images d'arrière-plan à l'intérieur du conteneur incliné apparaissent non-biaisées

Question

J'ai un carrousel (slick) qui affiche diverses diapositives que j'ai faussées de -10% pour créer un effet diagonal. Cependant, le contenu à l'intérieur est également faussé. Y a-t-il une solution pour dés-incliner juste le contenu et l'image de fond mais conserver l'effet diagonal sur le conteneur de diapositives?

jsFiddle ici - https://jsfiddle.net/czcjt3no/1/

<div class="section"> 
    <div class="grid poly--holder"> 
    <div class="poly-item"> 
     <div class="poly-item__content" style="background-image: url(https://unsplash.it/1000/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div> 
    </div> 
    <div class="poly-item"> 
     <div class="poly-item__content" style="background-image: url(https://unsplash.it/1100/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div> 
    </div> 
    <div class="poly-item"> 
     <div class="poly-item__content" style="background-image: url(https://unsplash.it/1200/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div> 
    </div> 
    <div class="poly-item"> 
     <div class="poly-item__content" style="background-image: url(https://unsplash.it/1300/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div> 
    </div> 
    <div class="poly-item"> 
     <div class="poly-item__content" style="background-image: url(https://unsplash.it/1400/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div> 
    </div> 
    </div> 
</div> 

.poly--holder { 
overflow: hidden; 

.poly-item { 
    box-sizing: border-box; 
    margin: 0; 
    transform: skewX(-10deg); 
    height: 400px; 

    .poly-item__content { 
    transform: skewX(10deg); 
    background-size: cover; 
    background-position: 50%; 
    height: 100%; 
    } 
} 

}

Answer 1

Si vous inclinez le conteneur, vous devez inverser désalignement le contenu. Skew est une transformation vers l'ensemble du noeud DOM, ce qui signifie que tous ses enfants seront transformés à la fois: vous ne pouvez pas arrêter la propagation.

.parent{ 
    transform: skewX(-10deg); 
} 

.child { 
    transform: skewX(10deg); 
} 

Here is your updated fiddle