Как сверстать данный (нестандартный) блок?

Question

[Hoffman_ZZZ]

Добрый день!
Есть скрин шаблона.
Подскажите пожалуйста как сверстать такой нестандартный блок.

Заранее благодарен.

Answer 1

[Евгений Петров]

Про SVG уже написали. А вот решение на псевдоэлементах.
Угол можно менять, ширину контейнера тоже.

Comments

[Hoffman_ZZZ]

Спасибо большое)

[Hoffman_ZZZ]

а можете показать как оно будет реализовываться на 100% ширине , и адаптивилось + position не fixed, a relative.

[Евгений Петров]

Вот так jsfiddle.net/petroveg/sykz5sds
А position:relative вам для фона не нужен, не придумывайте.

[NETChaser]

надо ещё в css добавить -webkit-backface-visibility: hidden;
иначе в хроме будет нехорошо отображаться

[Евгений Петров]

NETChaser: Что именно нехорошо будет?

[NETChaser]

Евгений Петров: https://jsfiddle.net/cqek2qe0/

[Евгений Петров]

NETChaser: Понял. Добавил.

Answer 2

[Nikolay Talanov]

clip-path: polygon для современных вебкитов/блинков. Весьма легко кастомизировать, можно всякие параллаксы сделать и при этом производительность будет хорошая.
Svg clippath для более серьёзной поддержки.
Можно нашаманить что-нибудь с transform: skew, но чую что решение будет похоже на один большой хак + будет пиксельная лесенка.
P.S. - все написанное выше подразумевает, что вам это обязательно надо сверстать не с помощью картинки, то есть в этом должен быть какой-то смысл (эффекты/параллакс/что-то еще). Если то, что изображено на скриншоте, будет статичным (я про эти полигональные фоны), то проще сделать картинкой, у которой нижняя левая часть (там где обычный светлый фон) будет прозрачной.

Comments

[Hoffman_ZZZ]

clip-path мы задаем блоку в котором картинка или самой картинке?

[Nikolay Talanov]

Hoffman_ZZZ: создаем блоки, внутри которых будет контент (фон/текстовые элементы), задаем им clip-path. После этого с элементами внутри можно делать что угодно, ибо с помощью overflow: hidden они будут жить только в рамках своего контейнера. Фон например можно вынести в отдельный блок и перемещать его с помощью transform: translate для параллакса и так далее.
+ этот самый clip-path отлично анимируется с помощью css transition. Вот пример хорошей анимации codepen.io/thebabydino/pen/Mwbrdg

[Hoffman_ZZZ]

А есть пример с clip-path?

[Евгений Петров]

Nikolay Talanov: Увы, clip-path в CSS поддерживает только webkit.
А почему вы считаете, что skew вызовет пиксельную лесенку?

[Nikolay Talanov]

Евгений Петров: Видел много сайтов с фуллскрин секциями, разделенными косыми линиями со skew. Была заметна лесенка. Зависит от угла наклона. Вот примитивная демка - codepen.io/suez/pen/7fff3129bbca4b6e745f9a0577352ce6
У 30 градусов выглядит все хорошо, а вот у 10 мне сразу в глаза бросается лесенка.

[Евгений Петров]

Nikolay Talanov: Найдите отличие jsfiddle.net/9Lj7h7ne

[Nikolay Talanov]

Евгений Петров: да, отличий нет. Сказалось то, что clippath svg я юзал непосредственно с картинками под другими углами и там все выглядело ок, а увидев несколько раз лесенку с skew, как то сразу в голове закрепился стереотип.

Answer 3

[teotlu]

Например, с помощью svg.

Comments

[Hoffman_ZZZ]

А по мимо svg можно как то реализовать?