CSS - Как быстро выровнять диагональные края?

#javascript #html #css #responsive #diagonal

#javascript #HTML #css #отзывчивый #диагональный

Вопрос:

Я пытаюсь создать адаптивный диагональный макет (см. Прикрепленное изображение). Конечно, это сложная задача при разных размерах экрана, поскольку края не выровнены (пример: см. Последние две строки на изображении).

Как я могу выровнять по вертикали верхний край каждой наклонной фигуры с нижним краем той, что над ней?

Пока что единственный способ, который я нашел для достижения этой цели, — изменить левое положение псевдоэлемента ::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>

Развернуть фрагмент

Ответ №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>

Развернуть фрагмент