實現對角線切片佈局，其中的div並排

我試圖實現對角佈局像這樣坐在一起 -實現對角線切片佈局，其中的div並排

而且我遇到https://bennettfeely.com/clippy/這是完美的，因爲我可以用夾子-path：多邊形創建我的形狀，只有對它的支持不是很好（在IE中根本不起作用）。我試圖找到polyfills，但到目前爲止，找不到任何可以正常工作的東西。

每個對角線部分將成爲客戶端將更新的文章傳情者，因此圖片和一些內容將與其關聯。

我創建了一個小提琴，它顯示了我目前在哪裏使用剪輯路徑：多邊形 - https://jsfiddle.net/pfx3Lxj3/ - 但我想知道如果任何人有任何其他的建議，我如何可以得到這個在至少IE10和向上。所有其他瀏覽器似乎都很好。

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

來源

2017-09-27 Frazer Findlater

你能不能退回到了IE /邊緣用戶的垂直帶？ – chazsolo

是的，如果我找不到合適的解決方案，但是有人會在下面添加一個非常好的和簡單的答案，那將是我的後備。 –

檢查這個，你可以使用傾斜的財產，支持當然這取決於對CSS3過渡/轉換瀏覽器的支持，所以你看IE9和最多

所以它的工作原理

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

來源

2017-09-27 16:36:27 Gattbha

實現對角線切片佈局，其中的div並排

回答

相關問題