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

Question

[NemeZZiZZ]

Нижняя кромка пунктов горизонтального меню должна быть такой:

Каждый пункт — разной ширины. Полностью вырезать под каждый пункт пока не хочу.
Пока что возникло желание воспользоваться SVG для :after. Не сильно ли я заморачиваюсь? Есть ли предложения, как сверстать такой декор?

Answer 1

[Сергей Савостин]

Накалякал тут на коленке.
Не кроссбаузерно, не красиво, половина хардкодово. Допиливайте сами.

Comments

[NemeZZiZZ]

Очень хорошо сделано, спасибо! Но я остановился на SVG :) Но вам плюсики за крутотень!

[Сергей Савостин]

Поделитесь решением, интересно.

Answer 2

[Softlink]

Сделать прямоугольник с тенями и бордерами. Одним псевдолементом навесить еще один прямоугольник с rotate и skew. Ему сделать такие же бордеры и тени. Вторым ПЭ закрыть все всплывающие тенюшки от первого. Теоретически должно получиться. Примерно такую же технику я использовал, когда верстал вот эти тултипы habrahabr.ru/post/136061/

Comments

[NemeZZiZZ]

Попробовал — получилось приятно, но оставил код с SVG.

Answer 3

[marcus]

Двумя треугольными дивами, наверно: habrahabr.ru/post/141658.

Comments

[XimikS]

у вас404, хотя бы это

[XimikS]

2web-master.ru/sozdaem-treugolniki-na-css.html

[marcus]

Ну, точка лишняя на конце. Парсер. habrahabr.ru/post/141658/

[Vladislav Klimanov]

я думаю marcus имел ввиду habrahabr.ru/post/141658/

[NemeZZiZZ]

Мне кажется, эта техника в данном случае мало применима: я не смогу повешать тень от бордера :(

Answer 4

[egorinsk]

Нормально — нельзя сверстать. Только через SVG/VML.

Answer 5

[MT]

Слегка постучать по голове придумавшему это дизайнеру. ;-)

Можно использовать IMG-элемент с заведомо большей шириной, задав ему ширину 100%.

Comments

[MT]

Или фоном с background-size, да.

[NemeZZiZZ]

Пробовал сразу — результат жуткий. Остановился на SVG.

Answer 6

[lorndesign]

) я рисовал png средней ширины, и потом сжимал или расширял на фоне… разница в 5-10px не бросалась в глаза

Comments

[NemeZZiZZ]

Делал такой вариант сразу: режет глаза разница между бордером и растром.