Вот этот вот код позволяет сделать Вот такую стрелку (http://floomby.ru/s1/cacFXm)
Думаю, если сделать какой нибудь костыль, то из этого можно получить, то что вам нужно.

PS: Я копировал с сайта, поэтому часть CSS лишняя.
Если пригодится, буду рад.

Сообщение отредактировал MeTaTRoN - 10.4.2013, 15:36

Dikucher,
Что именно Вас пугает? Мы должны гадать, что Вы увидели в таком простом шаблоне?

tszyan, скорее всего наклонные линии

Если вы про наклонную, то вырезать прямоугольник, сделать фоном прозрачность, переделать в png.Это самый простой имхо вариант. Что еще тут может пугать я даже не знаю.

Для новых браузеров наклон делается с помощью transform.
Если нужно кроссбраузерно, то как сказал medved112, делаем с помощью background-image. Надо только учесть что ширина у элементов разная.
Для этого разбиваем фон на 2 части. 1-я - начало с шириною картинки больше чем максимальная ширина пункта, 2-я - конец - завершающий элемент

Сообщение отредактировал tszyan - 10.4.2013, 15:45

Можно сделать так:
Вначале пункта span - первый срез
Вконце пункта span - конечный срез
Под фоном пускаем гардиент.

andreykashops,
лучше привязаться к li и a (2 бэкграунда, про которые писал выше)
li + a + 2 span + градиент - чересчур


К тому же span не позволит начать текст меню раньше его правой границы (без заморочек с позиционированием) - зачем такие сложности?

Сообщение отредактировал tszyan - 10.4.2013, 15:54

tszyan, ну нужно смотреть по возможностям. Например в WP меню можно было бы сделать так, как сказал выше, а там пусть мастер смотрит. Я предожил один из вариантов.

Сейчас вот думал, можно пропробовать реализовать через
background-size: 100%;
Если выризать картинку гардиента, или может я ошибаюсь?

может быть человек хочет сделать резиновые пункты меню, это вероятно и пугает.

Можно конечно градиентом, как то сыграть, но стоит подумать о кросбраузерности. Самый простой вариант добавить, вспомогательный тэг, к примеру b или span внутрь тэга <a>


Разрезать background (разумеется сохранить его в png формате, что бы сохранить прозрачность и качество), на две части: левую и правую

вырезал быстро для примера:

и правая часть


Ну а дальше манипулировать с каскадными стилями:


Разумеется это не панацея, и не готовое решение, придется подгонять под себя, но как вариант, я бы попробовал сначала так.

ps: можно с тремя частями вырезать градиент,
в 1px в background-repeat прописать repeat-x и задать бэкграунд тэгу <a>

вырезать правую, левую часть и что типа так:
<li><a href="#"><span class="left"><span class="right">Цвета</span></span></a><li>

но это уже мазохизм чистой воды

Сообщение отредактировал MAKAVE - 10.4.2013, 18:11