Можно ли сверстать подобное меню?

Question

[Дмитрий Куликов]

Нужно сверстать адаптивное меню для сайта по типу такого:


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

Добавлю что данное меню хочется использовать как элемент collapse из bootstap

Средние блоки при наличии правильной картинки описываются довольно легко, проблема с верхним и нижним.
jsfiddle.net/qsdmhgz5

Answer 1

[Sanes]

Я знал, что дизайнеры малость торкнутые. Но не до такой же степени.
Можно конечно, даже подобное было на Тостере, поищите.
Примерно так.

Answer 2

[Антон Фроловский]

Можно. Но остается вопрос в каких браузерах это должно поддерживаться.

Comments

[Дмитрий Куликов]

На первом плане это поддержка мобильных устройств, старые браузеры думаю можно откинуть

[Антон Фроловский]

Дмитрий Куликов: caniuse.com/#feat=transforms2d
Думаю гугл дальше поможет.

Answer 3

[Nikolay Talanov]

А что тут сложного? Блоки искаженные с помощью transform: skew, внутри них текст/бэкграунд искаженные в обратную сторону с таким же градусом.

Comments

[Дмитрий Куликов]

Первая проблема возникла в том что я не нашел как с помощью transform Можно изменить блок только с одной стороны

[_ _]

Дмитрий Куликов: Сделайте для first-child и last-child бOльшую высоту блока и оборачивающий блок сделайте overflow: hidden

[Андрей Самойленко]

Дмитрий Куликов: https://webref.ru/layout/html5-css3/transform/matrix

Answer 4

[_ _]

А помимо css-transform, кстати, можно еще svg элементы посмотреть - у обычных html inline-svg элементов поддержка на уровне.
codepen.io/AMar4enko/pen/wMOOaQ