Треугольник в меню

[npofopr]

Доброго дня.
Подскажите, как сделать у плашки с одно из краев треугольник?
Для наглядности, картинка:


Кнопка должна резиниться по высоте.
У меня пока на ум приходит, добавить дополнительный span с картинкой внутри на height: 100%; внутри например ссылкой с этим серым фоном.

Может у кого есть какие то наиболее подходящие варианты. Интересны варианты.
ie7~8+

 

[BaNru]

добавить дополнительный span

1) :after или :before и ie7.js )))
2) если без тени для ишака, то можно треугольничек сделать бекгроундом, а для нормальных браузеров мультибекгроундом

 

[npofopr]

[member=BaNru], и как этот беграуд будет растягиваться?

Пока сделал так: http://jsfiddle.net/npofopr/6JkGG/7/
в ie7 правда не смотрел, ну и это набросок пока.

По вертикали надо еще текст выравнивать.

 

[BaNru]

В ие7 твой пример не работает. Предлагаю ему сделать без этих красявостей.

Вот набросал вариант для современных браузеров
http://demo.g63.ru/ugolok.html

Кнопка должна резиниться по высоте.

Это самое трудное будет и не красивое, ибо картинка растягивается, что приводит к смазыванию.
Есть вариант сделать на SVG, но тут опять таки ишаки уходят в топку. Или на рафаель.js