のdivは、私はこのような斜めのレイアウトを達成しようとしている側

Question

に並べて座って斜めのスライスのレイアウトの実現 -

をそして私は、私はクリップを使用することができますよう完璧であるhttps://bennettfeely.com/clippy/に遭遇しましたが-path：ポリゴンは私の形を作成しますが、その上でのサポートは偉大ではありません（IEでは動作しません）。私はpolyfillsを見つけようとしましたが、まだ適切に動作するものは見つかりませんでした。

各対角線のセクションは、クライアントが更新してイメージといくつかのコンテンツが関連付けられるような記事ティーザーになります。

私は現在、クリップパスを使用している場所を示すフィドルを作成しました。多角形 - https://jsfiddle.net/pfx3Lxj3/ - しかし、少なくともIE10でこれをどのように動作させることができるか他の誰かが推薦していますか？アップ。他のすべてのブラウザはうまくいくようです。そう、それは働くあなたがアップ

をIE9を見ているように、このあなたがスキュープロパティを使用することができます

<div class="section"> 
    <div class="grid poly--holder"> 
    <div class="poly-item"></div> 
    <div class="poly-item"></div> 
    <div class="poly-item"></div> 
    <div class="poly-item"></div> 
    </div> 
</div> 

Answer 1

チェックは、もちろんこのため サポートは、/、ブラウザのサポートを変換CSS3遷移に依存

.grid { 
 
    box-sizing: border-box; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 

 
.poly--holder { 
 
    overflow: hidden; 
 
} 
 
    
 
.poly--holder .poly-item { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    transform: skewX(-10deg); 
 
    -moz-transform: skewX(-10deg); 
 
    -webkit-transform: skewX(-10deg); 
 
    background: blue; 
 
    width:35%; 
 
    height: 400px; 
 
} 
 

 
.poly--holder .poly-item:nth-of-type(1) { 
 
    z-index: 4; 
 
    margin: 0 0 0 -10%; 
 
} 
 

 
.poly--holder .poly-item:nth-of-type(2) { 
 
    z-index: 3; 
 
} 
 

 
.poly--holder .poly-item:nth-of-type(3) { 
 
    z-index: 2; 
 
} 
 

 
.poly--holder .poly-item:nth-of-type(4) { 
 
    z-index:1; 
 
    margin: 0 -10% 0 0; 
 
} 
 

 
.poly--holder .poly-item:nth-of-type(odd) { 
 
    background: green; 
 
}

<div class="section"> 
 
    <div class="grid poly--holder"> 
 
    <div class="poly-item"></div> 
 
    <div class="poly-item"></div> 
 
    <div class="poly-item"></div> 
 
    <div class="poly-item"></div> 
 
    </div> 
 
</div>