Как сверстать такой уголок?

Нижняя кромка пунктов горизонтального меню должна быть такой:
image
Каждый пункт — разной ширины. Полностью вырезать под каждый пункт пока не хочу.
Пока что возникло желание воспользоваться SVG для :after. Не сильно ли я заморачиваюсь? Есть ли предложения, как сверстать такой декор?
  • Вопрос задан
  • 4970 просмотров
Пригласить эксперта
Ответы на вопрос 6
savostin
@savostin
Еще один программист
Накалякал тут на коленке.
Не кроссбаузерно, не красиво, половина хардкодово. Допиливайте сами.
Ответ написан
@Softlink
Сделать прямоугольник с тенями и бордерами. Одним псевдолементом навесить еще один прямоугольник с rotate и skew. Ему сделать такие же бордеры и тени. Вторым ПЭ закрыть все всплывающие тенюшки от первого. Теоретически должно получиться. Примерно такую же технику я использовал, когда верстал вот эти тултипы habrahabr.ru/post/136061/
Ответ написан
marcus
@marcus
Двумя треугольными дивами, наверно: habrahabr.ru/post/141658.
Ответ написан
@egorinsk
Нормально — нельзя сверстать. Только через SVG/VML.
Ответ написан
Комментировать
MTonly
@MTonly
Веб-разработчик с 2002 года
Слегка постучать по голове придумавшему это дизайнеру. ;-)

Можно использовать IMG-элемент с заведомо большей шириной, задав ему ширину 100%.
Ответ написан
lorndesign
@lorndesign
) я рисовал png средней ширины, и потом сжимал или расширял на фоне… разница в 5-10px не бросалась в глаза
Ответ написан
Ваш ответ на вопрос

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

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