Как сверстать адаптивный треугольник для топ-меню?

Question

[Полина Емельянова]

Здравствуйте, коллеги!

У меня к вам "элементарный" вопрос: как сделать адаптивный треугольник для пункта меню?
Треугольник должен подстраиваться под ширину пункта.

Более менее вменяемое решение есть тут jsfiddle.net/webtiki/x9cxz423/199
НО!!! Я не могу целиком понять КАК оно работает. Там наверчены трансформции, паддинги, как для адаптивных фонов и изменяется контент-бокс. Другими словами контролировать ... м... Сложно.)))

Потрогать заготовку можно тут:
codepen.io/emelyanova/pen/oZKZOm
ЗЫ да, треугольник должен появляться по наведению)) Но это дело 25-е

Убедительная просьба коллег с ответами типа "SVG", "юзай проценты" и т.п. - не тратить на этот вопрос время и не бить пальцы о клавиатуру. Шаблон будет тянуться на ОпенКарт не первой свежести, а ЦА опять таки не с самыми свежими айфонами. Надеюсь на понимание!

Заранее огромное спасибо!

Answer 1

[pirojok_yoyo]

юзаешь triangle.designyourcode.io делаешь треугольник на псевдоэлементе, делаешь его на абсолюте задаешь ему top50% left50% transform: translateXY(-50%,-50%); вуаля он по центру всегда, нуатам уже медиазапросами уменьшишего на маленьких экранах

Answer 2

[Максим Тимофеев]

1. opencart и его версия не накладывает никаких ограничений на технологии используемые в верстке
2. svg отлично работает с iphone и т.д. caniuse.com/#search=svg
3. Можно сделать на чистом css через псевдоэлемент :after https://yandex.ru/search/?text=треугольник%20css3&...
4. Ну и просто картинку можно на back кинуть

Comments

[Полина Емельянова]

4. Вместо картинки, со злости, закину тогда СВГ. И прогера пошлю... Все мозги вынес, со своими ограничениями на опенкарт....

[Максим Тимофеев]

ограничениями на опенкарт

верстка и openCart так же связаны, как производитель автомобиля и мойка лобового стекла.