bugo_aneo
@bugo_aneo
Верстальщик по жизни, йог, буддист, кофеман

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

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

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

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

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

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

Заранее огромное спасибо!
  • Вопрос задан
  • 739 просмотров
Решения вопроса 1
bugo_aneo
@bugo_aneo Автор вопроса
Верстальщик по жизни, йог, буддист, кофеман
Сама отвечу.

Решение с трегольниками наковыряно... ОООООООООООЧЕНЬ Спорное, но мож кому и пригодиться.

codepen.io/emelyanova/pen/oZKZOm
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@pirojok_yoyo
юзаешь triangle.designyourcode.io делаешь треугольник на псевдоэлементе, делаешь его на абсолюте задаешь ему top50% left50% transform: translateXY(-50%,-50%); вуаля он по центру всегда, нуатам уже медиазапросами уменьшишего на маленьких экранах
Ответ написан
Комментировать
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
1. opencart и его версия не накладывает никаких ограничений на технологии используемые в верстке
2. svg отлично работает с iphone и т.д. caniuse.com/#search=svg
3. Можно сделать на чистом css через псевдоэлемент :after https://yandex.ru/search/?text=треугольник%20css3&...
4. Ну и просто картинку можно на back кинуть
Ответ написан
Ваш ответ на вопрос

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

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