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

Question

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

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

Более менее вменяемое решение есть тут.
Но я не могу целиком понять, как оно работает. Там наверчены трансформации, паддинги, как для адаптивных фонов и изменяется контент-бокс. Другими словами контролировать... м... сложно.

Потрогать заготовку можно тут: codepen.io/emelyanova/pen/oZKZOm

Убедительная просьба коллег с ответами типа "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 так же связаны, как производитель автомобиля и мойка лобового стекла.