трапеция. отступ от угла. css. responsive

Question

Есть два блока в форме трапеции. По левому краю от этих двух блоков идет линия под углом.

как при адаптиве рассчитать отступ относительно этой линии для обоих блоков, если их высота меняется?

Дело в том, что при моделировании блоков в форме трапеции с помощью transform: skew() привязка идет не от углов, а от середины левой стороны (как на скрине). В этом случае отступы при масштабировании съезжают.

не принципиально использовать transform: skew(). Просто может у кого-то есть идеи, как это реализовать?

заранее спасибо большое!!!

Answer 1

.skew {
  width: 90%;
  border-left: 2px solid gray;
  transform: skewX(-15deg);
  transform-origin: left bottom;
}

.line {
  background: gray;
  margin-left: 5px;
}

.line > span {
  transform: skewX(15deg);
  padding: 0 10px;
  box-sizing: border-box;
}

.line:nth-child(1) {
  font-size: 300%;
  margin-bottom: 5px;
}
.line:nth-child(2) {font-size: 150%;}

<div class="skew">
  <div class="line">
    <span>Lorem</span>
  </div>
  <div class="line">
    <span>Ipsum</span>
  </div>
</div>

БЛОГ НА HUSL

трапеция. отступ от угла. css. responsive

Ответы (1 шт):