html - CSS3 布局 - 4 列多边形

Question

我的 View 中的 4 列布局有一个大问题。

我必须构建这个布局:

有人知道我如何制作这个布局吗？我使用 -clip 方法，但第一个 div 总是来自最后一个 div。两个居中的 div 可以，但 first 和 last 不行。

如果你知道我该怎么做，请帮助我......

Answer 1

下面是一个结合定位使用梯形边框的例子:

body {
  margin: 0;
}
.section {
  position: relative;
  display: inline-block;
  width: 25%;
  margin-right: -4px;
}
.background {
  position: absolute;
  top: 0;
  width: 100%;
  height: 0;
  border-right: 30px solid transparent;
  border-bottom: 300px solid #346;
}
.content {
  position: absolute;
  top: 0;
  color: #fff;
  padding: 10px 10px 10px 30px;
  z-index: 100;
}
.s1 .background {
  border-bottom-color: yellow;
  z-index: 5;
}
.s2 .background {
  border-bottom-color: blue;
  z-index: 4;
}
.s3 .background {
  border-bottom-color: navy;
  z-index: 3;
}
.s4 .background {
  background-color: black;
  border: none;
  height: 300px;
}

<div class="section s1">
  <div class="background"></div>
  <div class="content">Lorem Ipsum</div>
</div>
<div class="section s2">
  <div class="background"></div>
  <div class="content">Lorem Ipsum</div>
</div>
<div class="section s3">
  <div class="background"></div>
  <div class="content">Lorem Ipsum</div>
</div>
<div class="section s4 last">
  <div class="background"></div>
  <div class="content">Lorem Ipsum</div>
</div>

限制:您必须定义固定高度(上例中的300px)