2

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

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

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

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

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

скриншот проблемы

1 ответ 1

2

.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>

1
  • 1
    спасибо огромное!!!
    – JKaminsky
    1 сен 2020 в 12:59

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.