歪んだコンテナ内の背景画像を歪ませて表示しない

Question

斜め効果を作り出すために-10％ずつずらしたさまざまなスライドを表示するカルーセル（滑らかな）があります。しかし、その内部のコンテンツも歪んでいます。コンテンツと背景画像だけを歪ませずにスライドコンテナに対角効果を残すソリューションはありますか？ここ

Jsfiddle - 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

あなたが逆スキューするコンテンツを持っているコンテナをスキューした場合。

スキューは、DOMノード全体への変換です。スキューは、すべての子ノードが同時に変換されることを意味します。伝播を停止することはできません。

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

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

Here is your updated fiddle