实现 div 并排放置的对角线切片布局

Question

我正在尝试实现这样的对角线布局 -

而且我遇到了 https://bennettfeely.com/clippy/，这是完美的，因为我可以使用 clip-path: polygon 创建我的形状，唯一的问题是对它的支持不是很好（在 IE 中根本不起作用).我试图找到 polyfill，但到目前为止，找不到任何可以正常工作的东西。

每个对角线部分都是一个文章预告片，客户将更新该预告片，以便图像和一些内容与其相关联。

我创建了一个 fiddle，它显示了我目前使用 clip-path: polygon - 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

检查这个你可以使用倾斜属性，对此的支持当然取决于 CSS3 transition/transform 浏览器支持，因此您正在查看 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>

实现 div 并排放置的对角线切片布局

Achieving a diagonal sliced layout where divs sit side by side

html

css

polyfills

clip-path