srko
@srko
JavaScript / HTML / CSS

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

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

ae0b6433539e4820ba2c78cc7ec98bc2.png

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

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

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

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

Всем спасибо!
Надеюсь, эти подсказки будут полезны другим разработчикам.
  • Вопрос задан
  • 3532 просмотра
Решения вопроса 4
@Avivar
jsfiddle.net/9cztuqfx У меня вот что получилось. Возможно подойдет такое

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

можно сделать самым простым и старым способом. Разрезаете картинку на 3 части. 1- до слова, 3- после. и берете 1px то что будет вокруг текста. Далее на before первую картинку. на after -2. само поле заполняете 1px
Ответ написан
SerzN1
@SerzN1
Challenge me!
1 - jsfiddle.net/SerzN1/68fcngcp/18 (почти по старинке с 1 картинкой)
2 - jsfiddle.net/SerzN1/muq2bhcp/1 (ИМХО СОВРЕМЕННЕЕ И УНИВЕРСАЛЬНЕЕ)

лучше добавить в DataURI в 1 случае
Ответ написан
AleksandrAndHABR
@AleksandrAndHABR
Frontend Developer
Без картинок, только css
jsfiddle.net/ro255o3r/1
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
bobrov1989
@bobrov1989
Front-end Dev
Посмотрите в сторону вот етого цсс свойства htmlbook.ru/css/border-image
позволит поставить заготовленую картинку для бордера и растягивать ее по периметру, единственное прийдеться отказаться от древних браузеров типа ИЕ8
Ответ написан
mr_dev1l
@mr_dev1l
Технический верстальщик
Проблема в градиенте. Иначе можно было сделать двойной background один left top, другой right bottom и углы эти поставить. А так пожалуй подпишусь и буду следить за вариантами. Тема интересная
Ответ написан
RainMEN
@RainMEN
HTML/STYLUS/JADE/JS/Laravel/Joomla/DLE и т.д.
На самом деле за такие проделки нужно дизайнеру руки оторвать =)) Допускают такое использование без градиента, или в статичных макетах типа lp. Вариант использования 3 картинки подойдёт, только вот общая картина очень длинного элемента будет не красива. Предлогаю перерисовать без градиента пок не поздно. Практика показывает что через 2-3 месяца такое переделывают в динамических макетах.
Ответ написан
@Kjuri
Поставить фоном у каждого блока и background-size:100% 100%
Но будут различия в размерах.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы