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

Question

[Alex7878]

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

Answer 1

[HamSter]

Как вариант - clip-path

пример

генератор

Вот что еще получилось у меня

Comments

[Сергей ZSA]

и чтоб это никогда не заработало в FF и IE?)) Просто выкинем часть аудитории и всё.

[HamSter]

Сергей ZSA: а flex (который везде, где только можно тыкают) не выкидывает аудиторию?!

[Alex7878]

Сергей ZSA: а как быть?

[HamSter]

Alex7878: тогда картинкой вставлять, чтобы наверняка! либо еще вариант - :before/:after

[Сергей ZSA]

HamSter: Да ты шо....

caniuse.com/#feat=flexbox
caniuse.com/#search=clip-path

А я то думал что люди умные flexbox пользуются.

[HamSter]

Сергей ZSA: caniuse.com/#search=flex ну и? Может быть не стоит умничать?! ие с 11

[Сергей ZSA]

HamSter: ну а clip-path ты просто выкинешь ie11 и edge напрочь и основную часть FF. Есть разница?

[Danila]

Сергей ZSA: Сергей ZSA: в том, что пользователи ие и фф не смогут узреть сие дизайнерское чудо нет ничего страшного. Пусть лучше так, чем выдумывать дикие костыли, или вырезать картинку пнгшкой с диким размером.
Ну а флексбокс тут не к месту, не использовать его - глупо
тем более есть полифил с поддержкой ие9 +

[Alex7878]

То что нужно. Уже сделал костылями, но при некоторых условиях криво. Так что воспользовался вашим решением. Спасибо

Answer 2

[Роман]

почему заморочки?вверху у нас обрезаная картинка. Нижний блок подымаешь вверх через margin отрицательный. К этому блоку кидаешь на before треугольник белый

Answer 3

[Олег]

Как вариант https://jsfiddle.net/joomla/cn0rq8bL/
Но лучше svg

Answer 4

[Сергей ZSA]

Рисуем с таким же углом блок в PS экспортируем в svg, ставим background-ом для before/after к следующему/нынешнему блоку. Если вариант не подходит - нужно знать почему не подходит и смотреть диз целиком.

Answer 5

[Alex7878]

Да убрать убрать угол у картинки не составит труда, хотелось бы как то так блок сверстать. Чтобы без заморочек с картинками с админки выводить. В оригинале там еще один блок наложен, тоже не стандартный. Вот и не знаю с какой стороны подойти

Comments

[Денис Букреев]

у второго плашки с текстом просто треугольник сделать с помощью границ и все

[HamSter]

codepen.io/semenchenko/pen/XKaYVN

Answer 6

[AlexanderShustik]

Попробуй верхнему блоку задний фон изображением задать