javascript - CSS - 如何响应地对齐对角线边缘？

Question

我正在尝试创建响应式对角线布局（见附图）。当然，这在不同的屏幕尺寸下是一个挑战，因为边缘不对齐（例如：参见图像的最后两行）。

如何将每个倾斜形状的顶部边缘与其上方的底部边缘垂直对齐？

到目前为止，我发现实现此目的的唯一方法是更改​​倾斜形状上 ::before 伪元素的左侧位置。但是我想随着行大小的增长和屏幕大小的调整来响应地实现这一点。

.slant::before {
  background-color: lightblue;
}

.lr .right-content,
.rr .left-content {
  background-color: green;
}

.lr .slant,
.rr .slant {
  position: relative;
}

.lr .slant::before,
.rr .slant::before {
  content: '';
  transform-origin: 100% 0%;
  position: absolute;
  top: 0;
  bottom: 0;
}

.lr .slant::before {
  transform: skewX(-10deg);
  left: -100vw;
  right: 0;
}

.rr .slant::before {
  transform: skewx(10deg);
  left: 0;
  right: -100vw;
}

<div class="container">
  <div class="row lr one">
    <div class="col-xs-5 left-content slant">
      <h1>Title</h1>
    </div>
    <div class="col-xs-7 right-content">
    </div>
  </div>

  <div class="row rr card two">
    <div class="col-xs-5 left-content">
    </div>
    <div class="col-xs-7 right-content slant">
      <p>Lorem Ipsum is simply dummy...</p>
      <p>Lorem Ipsum is simply dummy...</p>
      <p>Lorem Ipsum is simply dummy...</p>
    </div>
  </div>
  ...
</div>

标签： javascripthtmlcssresponsivediagonal

Answer 1

这是一个使用的想法clip-path：

.row {
  position:relative;
  background:lightblue;
  height:50px;
  margin:5px;
}
.row::before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  background:green;
}
.row.left::before {
  left:0;
  clip-path:polygon(0 0,100% 0, calc(100% - 30px) 100%,0 100%);
}
.row.right::before {
  right:0;
  clip-path:polygon(0 0,100% 0, 100% 100%,30px 100%);
}

.row.left.bottom::before,
.row.right.bottom::before{
  transform:scaleY(-1);
}

<div class="row right bottom"></div>
<div class="row left" style="height:100px"></div>
<div class="row left bottom"></div>
<div class="row right" style="height:200px"></div>
<div class="row right bottom" style="height:100px"></div>
<div class="row left" style="height:100px"></div>