Верстка меню, ваши варианты реализации

Question

[daer]

Приветствую, собственно вопрос:
как бы вы реализовали такое меню см. картинку?
Условия:
фон под меню произвольный
само меню тянется в ширину, количество пунктов произвольное

Мой способ показался мне кривоватым, найти что-то похожее не получилось, поделитесь идеями :)

Answer 1

[Softlink]

Можно с трансформами поиграться немного. При желании, можно даже хорошо деградировать до ИЕ7 :)

Comments

[daer]

это самое подходящее, в ие8 тоже получилось сделать рабочий вариант
спасибо

Answer 2

[XHunter]

jsfiddle.net/nHU6Y/
так?

Comments

[Makito]

А зачем вам понадобилось эмулировать таблицу посредством ul — li?
Не проще сразу было сделать на таблице?
Ну и кроме того, в реализации данного меню основную проблему вызывает как раз таки не само растяжение меню а работа с заливкой как в картинке.

[XHunter]

Ну добавить к нужному элементу transform: skew(-20deg) и делов-то. Правда потом придется сделать костыль в виде еще одного внешнего блока но только с 20deg

Answer 3

[maxatwork]

А в чем сложность-то? Судя по картинке задача тривиальна.

Answer 4

[Николай Турнавиотов]

эм. у меня twitter bootstrap сейчас рисует вот так:

Попробуйте посмотреть в его сторону

Comments

[Сергей Протько]

Просто отображать в строчку — это легко. Тут видимо у автора загвоздка в градиенте и в форме пунктов.

[daer]

с градиентом без проблем, загвоздка только с формой пунктов и самого меню