Как реализовать многоугольник в меню?

Question

[srko]

Есть меню в котором у каждого пункта hover-эффект в виде неправильного многоугольника с градиентом.



Основная проблема в том, что пункты меню разные по длине, а значит — обводка должна растягиваться горизонтально. То есть, ни просто картинка, ни svg не покатит.
К тому же, эта форма — «фишка» дизайна и используется неоднократно в других местах макета.

Если пожертвовать градиентом, то у меня все сводится к одноцветным border-top и border-bottom с картинками углов в :before и :after (border-left и border-right).

Как еще это можно реализовать?
Или возвращать дизайнеру и пусть делает прямоугольники?

——————————————————————————————————————————
В принципе, несколько вариантов так или иначе подходят для решения, я их отметил.
Но в этом проекте все-таки было решено упростить форму до прямоугольника.

Всем спасибо!
Надеюсь, эти подсказки будут полезны другим разработчикам.

Answer 1

[Avivar]

jsfiddle.net/9cztuqfx У меня вот что получилось. Возможно подойдет такое

Вот еще решение придумал. Тут нет отрисовки элементов через css, а используется маска из картинки, которая накладывается поверх градиента... Маску сделал на скорую руку в фотошопе.
jsfiddle.net/u7748k5q

Comments

[SilentFl]

awesomescreenshot.com/01d481ot9f

[kn1ght_t]

SilentFl: ширину-то у .qq можно и убрать

[SilentFl]

точно, где-то проглядел. +1!

Answer 2

[Сергей Иванов]

можно сделать самым простым и старым способом. Разрезаете картинку на 3 части. 1- до слова, 3- после. и берете 1px то что будет вокруг текста. Далее на before первую картинку. на after -2. само поле заполняете 1px

Answer 3

[SerzN1]

1 - jsfiddle.net/SerzN1/68fcngcp/18 (почти по старинке с 1 картинкой)
2 - jsfiddle.net/SerzN1/muq2bhcp/1 (ИМХО СОВРЕМЕННЕЕ И УНИВЕРСАЛЬНЕЕ)

лучше добавить в DataURI в 1 случае

Comments

[srko]

Первый вариант у меня в Фаерфокс разлетелся.
А второй отличный!
Даже теперь думаю не внедрить ли его.

[SerzN1]

srko: файл маски перезаписался случайно, исправил

Answer 4

[Саша Ткаченко]

Без картинок, только css
jsfiddle.net/ro255o3r/1

Comments

[srko]

Я так понимаю, что это только для однородного фона подойдет?
Прозрачность там не сделать?

[Саша Ткаченко]

Нет.

Answer 5

[Виталий Бобров]

Посмотрите в сторону вот етого цсс свойства htmlbook.ru/css/border-image
позволит поставить заготовленую картинку для бордера и растягивать ее по периметру, единственное прийдеться отказаться от древних браузеров типа ИЕ8

Answer 6

[mr_dev1l]

Проблема в градиенте. Иначе можно было сделать двойной background один left top, другой right bottom и углы эти поставить. А так пожалуй подпишусь и буду следить за вариантами. Тема интересная

Answer 7

[Игорь Пушкарский]

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

Answer 8

[Kjuri]

Поставить фоном у каждого блока и background-size:100% 100%
Но будут различия в размерах.