Как сделать такое меню методами CSS?

Question

[DoSP]

Как сделать такое меню методами CSS. Собственно меня интересуют бока меню. Пробовал элементами before, after, но не учел что бекграунд задан градиентом. Можно конечно впихнуть на фон картинку. Но меня интересует можно ли заверстать такое с помощью CSS?

Answer 1

[Андрей Гончаров]

По моему, все равно в итоге придешь к нарезке изображений для этого меню. Левые и правые части полупрозрачные пнг. А тело меню из повторяющейся пнгшки с таким же градиентом. Можно попробовать центральную часть css градиентом, но тут возможны расхождения в визуальном отображении с краевыми частями.

Comments

[DoSP]

в итоге к этому я и пришел

Answer 2

[Damir Aushenov]

codepen.io/Guilh/pen/ILJAl

Comments

[Капитан Какао]

В лисе не работает.

Answer 3

[hime2]

Лучше обратится к svg, если на css, много кода получится.
Делать при помощи картинки не то что бы устарело, это прошлый век.

Comments

[hime2]

а так 2 псевдо класса, 2 треугольника, закругленные + градиент.