Как правильно сверстать вертикальные блоки?

Question

[Lorem Ipsum]

Нужно сверстать вертикальные блоки с текстом, использую свойство writing-mode: vertical-rl, но текст переворачивается не так как нужно, остается вариант с transform: rotate(90deg), но я не хотел бы его использовать, так как получается криво относительно белых линий до текста.
Как получается с writing-mode: vertical-rl

Как в макете

Решение найдено:

writing-mode: vertical-rl;
    transform: rotate(-180deg);

Comments

[Виталий Киренков]

Почему с трансформом криво? У вас текст по центру блока должен располагаться или на определенной дистанции от линии?

[Lorem Ipsum]

Виталий Киренков, sharpsteel.ru
Вот почти готовая верстка, там видно как расположен, сверху блока после линии

[Виталий Киренков]

Lorem Ipsum, Круто, что сами разобрались)

Кстати, крутой диз, но в верстке есть пара небольших косячков.

[Lorem Ipsum]

Виталий Киренков, Согласен) косяки сейчас на стадии исправления, дизайнер еще в сетку (12 col) криво попал

[Ankhena]

Lorem Ipsum, дизайнер вообще не обязан попадать в сетку

[Lorem Ipsum]

Ankhena, изначально обговаривали про сетку Bootstrap с дизайнером, поэтому в данном случае я думаю стоило её придерживаться

[Ankhena]

Lorem Ipsum, так да, если есть ТЗ, то должен

[Виталий Киренков]

Lorem Ipsum, там не в сетке вопрос. у вас тени в слайдере обрезаются (кстати, я не понял что это слайдер, случайно крутанул), карта не должна зумиться при скролле (то есть я хочу прокрутить страницу, а получается зум)

[Lorem Ipsum]

Виталий Киренков, именно эти косяки и исправляю в данный момент)

Answer 1

[Андрей Федоров]

writing-mode: sideways-lr;

Comments

[Lorem Ipsum]

Отображается горизонтально при sideways-lr

[Андрей Федоров]

Lorem Ipsum,

[Lorem Ipsum]

Андрей Федоров, Спасибо за ответ, но почему-то у меня не работает это решение

[Lorem Ipsum]

Андрей Федоров, использовал transform

writing-mode: vertical-rl;
    transform: rotate(-180deg);