实现对角线切片布局，其中div并排放置

Question

我试图实现这样的对角线布局 -

而且我遇到https://bennettfeely.com/clippy/这是完美的，因为我可以使用剪辑路径：多边形创建我的形状，唯一的事情是它的支持不是很好（在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>

Answer 1

选中此项您可以使用skew属性， 支持这当然取决于CSS3转换/转换浏览器支持，所以你正在看IE9及以上

所以它有效

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;