Как сверстать такой шаблон?

Question

[Artem Petrenko]

Как проще сверстать подобную вещь средствами CSS? (речь идет о квадратах). При использовании transform текст внутри блоков тоже ведь повернется? Благодарен любым советам.

Answer 1

[Игорь]

Готовый вариант
Создаем блоки и меняем им наклон,а внутри прописываем display: inline-block и противоположную трансформацию для текста,чтобы он был ровным.

transform: rotate(-45deg);

Comments

[Андрей Фатюк]

могут возникнуть проблемы со сглаживанием текста в некоторых браузерах

Answer 2

[Serj-One]

Сделать квадрат псевдоэлементом, и повернуть уже его.
Как уже верно подметил Александр А, если применять трансформацию к тексту, он будет отображаться немного некрасиво. Однако делать квадрат из двух треугольников тоже незачем.

Answer 3

[GreatRash]

Who Says the Web is Just for Squares ;-)

Answer 4

[WhiteSama]

Как насчет SVG? SVG-path По-моему самый удобный способ.

Answer 5

[Александр Таратин]

Нафиг css transform
Повесить на before и after
apps.eky.hk/css-triangle-generator (будет даже в старых ie работать )

Answer 6

[Михаил Чирский]

Делаете через transform, а потом поворачиваете текст на столько сколько и квадрат и текст выравнивается.

Answer 7

[Денис Богданов]

Повернуть блоки текста в другую сторону, тоже с помощью transform