Как можно так спозиционировать дивы?

Question

[travinik]

Подскажите какими средствами можно так спозиционировать блоки ? И по возможности пример хоть одного подобного дива. Спасибо!

Answer 1

[whoisthere]

Position: Absolute + Transform: Rotate(-(УГОЛПОВОРОТА)deg);

Пример на инлайн блоках

Comments

[travinik]

Спасибо, разобрался!

Answer 2

[GreatRash]

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

Если бы речь шла только о современных браузерах и, так сказать, proof of concept, то я бы сделал единый блок. развёрнутый на 45 градусов при помощи transform rotate, а внутри запилил бы grid layout или flex, вложенный во flex, вложенный во flex и т.д.

UPD: Кстати дизайнер тут с отступами конкретно налажал.

Comments

[travinik]

Спасибо! Так тоже попробую.

[travinik]

А что с отступами ?

[Денис]

travinik: все разные))

Answer 3

[Иван Бабий]

Как по мне, лучше не изоощрайтесь. К чему такая волокита при web-разработке? Можно придумать что-то проще, но не менее клевое