Значит, вопросик в следующем, есть два родителя, l (left) и r (right) соответственно, в каждом по два блока, НО, блоки в l немного ниже позиционируются чем в r
Я понимаю что если бы у блоков высота была фиксированной, например 250, то отступ сверху 125 кое-как это бы решил, но мы играем no rules, no heights как говорится)
На фото пример который я так коряво пояснил...
Как такое сделать?
Я бы задал максимальную высоту всем блокам, по высоте самого объемного контента, на всякий случай обрезал текст, если добавят больше символов. Ну или на js написал для расчета отступов, но в этом случае пришлось скрывать скачок при рендеринге.
Я не читал вашу реализацию я скажу то как бы я примерно такое реализовал.
Главный родительский блок имеет ширину допустим 1500px, также имеет 2 дочерних блока шириной 500 пикселей.
Главному родительскому задаем свойство display:flex + justfiy-content:space-beetwen;, таким образом мы раздвигаем блоки по краям нашего главного род. блока.
Далее создаем тень левому и правому дочерним блокам.
С картинки не видно налаживается ли там тень или нет но далее в дочерних создаем основные текстовые блоки и псевдо элементом уже делаем треугольник относительно нашего текстового блока(или можно дивкой с абсолютом сделать как вариант).
И там уже z-index если тень налаживается на блок, хотя тут вроде может не сработать, но концепция была бы такая.
Георгий Городенко, как обычный блок только внутри большого левого допустим и у левого задать align-items: center; justify-content: center; чтобы они выравнялись
Вариант, предложенный Максим Ленский не адаптивный и ломается при изменении контента, так что предложу свой.
Треугольники можно было упустить, не в них суть)
Ну ну совсем так. При верстке таких сайтов важно сохранять контекст, в котором был дизайнер (если с ним есть контакт, то лучше все обсудить с ним, но в нашем случае пример в вакууме, так что думаем сами). Конкретные размеры обычно не так важны, как контекст. Здесь его задает равномерная линия между треугольниками и ее важно сохранить. Исходя из этого соображения нужно посчитать, какого размера должны быть треугольники, чтобы все влезало и "было красиво", учитывая, что высоты всех блоков могут меняться. CSS у нас не дает возможности делать вычисления исходя из высоты соседних элементов, так что придется добавить щепотку JS. Ну а дальше - дело техники.
Максим Ленский, Если добавить больше текста, то все обрезается (текст не влезает), а если убрать жестко заданный атрибут height для контента, то треугольники уже по размеру не подходят к нему.
Простой
