Как сверстать эту магию?

Question

[Heorhii]

Всем привет!

Значит, вопросик в следующем, есть два родителя, l (left) и r (right) соответственно, в каждом по два блока, НО, блоки в l немного ниже позиционируются чем в r
Я понимаю что если бы у блоков высота была фиксированной, например 250, то отступ сверху 125 кое-как это бы решил, но мы играем no rules, no heights как говорится)
На фото пример который я так коряво пояснил...
Как такое сделать?

Comments

[Анатолий]

Высота блоков одинаковая?

[Heorhii]

Анатолий, нет

[Aetae]

Нарисуй тогда, как оно по твоему должно выглядеть с сильно разными высотами блоков.

[Heorhii]

Aetae, ну представь что в первый в r блок ты дописал слов еще на 2 строки, высота станет больше, и отступ сверху у родителя l 125 уже не прокатит

[Aetae]

Георгий Городенко, да вот не могу я представить - поедет всё нахрен, потому и прошу нарисовать.)

[WapSter]

Я бы задал максимальную высоту всем блокам, по высоте самого объемного контента, на всякий случай обрезал текст, если добавят больше символов. Ну или на js написал для расчета отступов, но в этом случае пришлось скрывать скачок при рендеринге.

Answer 1

[Lord_Dantes]

Я не читал вашу реализацию я скажу то как бы я примерно такое реализовал.
Главный родительский блок имеет ширину допустим 1500px, также имеет 2 дочерних блока шириной 500 пикселей.
Главному родительскому задаем свойство display:flex + justfiy-content:space-beetwen;, таким образом мы раздвигаем блоки по краям нашего главного род. блока.
Далее создаем тень левому и правому дочерним блокам.
С картинки не видно налаживается ли там тень или нет но далее в дочерних создаем основные текстовые блоки и псевдо элементом уже делаем треугольник относительно нашего текстового блока(или можно дивкой с абсолютом сделать как вариант).
И там уже z-index если тень налаживается на блок, хотя тут вроде может не сработать, но концепция была бы такая.

Comments

[Heorhii]

а сами блоки в левой и правой колонке вы бы как сделали?

[Lord_Dantes]

Георгий Городенко, как обычный блок только внутри большого левого допустим и у левого задать align-items: center; justify-content: center; чтобы они выравнялись

Answer 2

[Ivan Bogachev]

Вариант, предложенный Максим Ленский не адаптивный и ломается при изменении контента, так что предложу свой.

Треугольники можно было упустить, не в них суть)

Ну ну совсем так. При верстке таких сайтов важно сохранять контекст, в котором был дизайнер (если с ним есть контакт, то лучше все обсудить с ним, но в нашем случае пример в вакууме, так что думаем сами). Конкретные размеры обычно не так важны, как контекст. Здесь его задает равномерная линия между треугольниками и ее важно сохранить. Исходя из этого соображения нужно посчитать, какого размера должны быть треугольники, чтобы все влезало и "было красиво", учитывая, что высоты всех блоков могут меняться. CSS у нас не дает возможности делать вычисления исходя из высоты соседних элементов, так что придется добавить щепотку JS. Ну а дальше - дело техники.



codepen.io/sfi0zy/pen/zYxJNmG.

Comments

[Максим]

а где он сломался мой пример ? он не может сломаться так как размер фиксированный ...Иван достаточно было дать свой ответ ...это не хорошо

[Ivan Bogachev]

а где он сломался мой пример ?

Максим Ленский, Если добавить больше текста, то все обрезается (текст не влезает), а если убрать жестко заданный атрибут height для контента, то треугольники уже по размеру не подходят к нему.

[Ivan Bogachev]

Максим Ленский, Ну а чисто фиксированный размер в 2020 году - странно как-то выглядит.

[Максим]

Ivan Bogachev, на скриншоте 45 слов ...и это не фриланс ..не так ли ?

[Heorhii]

Ivan Bogachev, Иван, спасибо за Ваш вариант, и старания..
Получилось максимально схоже