Как делается верстка перевернутых DIVов?

Question

[necotumusimnapsat]

Всем привет,
скажите пожауйста, как правильно верстаются такие сайты ?



Думал добавлять треугольники но увы не получится, там есть slider, картинки, нужен будет paralax эффект.
Потом попробовал поворачивать DIV, и все внутри DIVа пришлось поворачивать в другую сторону, притом все получается криво и размывается.

А как вы верстаете подобные макеты ?
Заранее благодарю за ответы.

Answer 1

[Алексей Приказчиков]

Когда-то я это просто решал фоном и его масштабированием в CSS. Но сейчас когда в моде адаптив и SVG всё гораздо усложнилось, но и чёткость повысилась. Если фон сплошной то верх SVG margin-top с "-" внизу наоборот.

Может криво, но адаптивно + SVG это никаких заморочек с Renita =) Но могу и ошибаться. Хотя, как мне кажется эксперименты с position явно больше требуют костылей.

UPD. Можете в живую показать? Bootstrap?

UP/ UP/ Если Bootstrap тогда можете глянуть решение в этом шаблоне:
www.gt3themes.com/website-templates/timber

Before и after + svg там правда вроде просто картинка. Svg будет глаже при масштабе.

Answer 2

[xmoonlight]

так просто 3 дива друг над другом.

Answer 3

[Pavel K]

Можно повернуть див-фон внутри дива

Answer 4

[Павел Воронюк]

Типо вот так?

http://codepen.io/anon/pen/LGMLZB

Comments

[Алексей Приказчиков]

Шикарно )

[Илья Пирожок]

То есть через transform: skew; и все?

[Павел Воронюк]

Алексей Приказчиков: :) еще подкоректировал)

[Павел Воронюк]

Илья Пирожок: фишка в чем: Мы все пихаем в блок бэкграунда(черный) в нем ставим блок который мы наклоняем, и внутри ставим еще "блок" который наклоняем в обратную сторону, чтоб выровнять текст. а дальше дело фантазии)

[Илья Пирожок]

Павел Воронюк: Понял, реально не знал такого) Но видишь там качество блока страдает, все же transform еще не может нормально отрисовать все

[Павел Воронюк]

Илья Пирожок: ну да, эта линия что под наклоном идет, само собой будет не очень качественная и глаза это быстро ловят, но тут уже ничего пока что не поделать)

[Алексей Приказчиков]

Павел Воронюк: всё же мне кажется before & after + svg получается более кроссплатформенно ) И изящнее )

[Павел Воронюк]

Илья Пирожок: Хотя) добавил box-shadow и уже как то полутчше смотрится)

[Павел Воронюк]

Алексей Приказчиков: возможно не спорю)

[Алексей Приказчиков]

Павел Воронюк: и я не спорю, просто стоит глянуть совместимость transitions с браузерами и мне так делать не хочется )

[Павел Воронюк]

Алексей Приказчиков: точнее transform =) думаю там совместимость как у before и after, но сам хз) надо смотреть)

[Алексей Приказчиков]

Павел Воронюк: да да, transform ) глаза слипаются в кучу )