Как сверстать нестандартный макет?

Question

[Алексей Верховцев]

Всем привет, товарищи, есть макет, он вообще неординарный, нужно сделать его в дополнение ко всему адаптивным, если бы не это, то можно было бы всё позициями задать, но т.к. должен быть адап нужно как-то более элегантно, плюс непонятно как сделать все эти косые блоки (главное, чтобы в них располагаются элементы, которые выходят за границы блока, как на 2 блоке, где коробка с таблетками, плюс ещё этот блок надо как-то связать с блоком мужика, который чуть ниже, короче жуть).

Answer 1

[Егор Рублёв]

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

Comments

[Алексей Верховцев]

Можно хоть какой-то пример, а то я не понимаю как реализовать Ваше предложение

[Егор Рублёв]

Ну берёте div, ставите ему bg квадратный, поверх дива накладывайте слой с svg, или :before к диву с углом. https://jsfiddle.net/salofun/7120okLs/

[Егор Рублёв]

Можно даже поставить bottom: 0;
Чтобы не считать top: NNNpx;
https://jsfiddle.net/salofun/7120okLs/2/

Answer 2

[HamSter]

Если только подсказать, то svg тут не нужен, все делается background + псевдоэлементами :before, :after !

В остальном - это задание на фриланс!!!

Answer 3

[Алексей Верховцев]

Ага, спасибо конечно, но варианты с svg и псевдоэлементами это понятно, но как я смогу запихать в данный блок что-то из контента без позиционирования, грубо говоря такой блок, я делаю bg с картинкой, где рука девушки квадратным, после этого или svg или псевдо делаю ему этот треугольник или что это непонятно, но как я должен буду запихать в этот "треугольник" блок с таблетками и текст без позиционирования

Comments

[Егор Рублёв]

Оберните в блоки и сделайте отступы им (margin).

[Егор Рублёв]

А ещё можно использовать сетку, даже bootstrap решит эту задачу.

[Алексей Верховцев]

Егор Рублёв: данную задачу явно не решит бутстрап