Острые углы у табов

[HeadHunter]

Всем привет. Столкнулся с задачей сделать скошенные углы у вкладок (jquery табы)
В итоге должно получится такое Для просмотра ссылки Войди или Зарегистрируйся
Как не пробую не получается. С меня на печеньки

 

[bork75]

Для начала нужно расписать как будет выглядеть css для каждого варианта выбранной вкладки.
Самое простое потом просто повесить эти готовые варианты на каждую вкладку onclick=document.write('<style>link_1{}; link_2{}</style>')

Если меню на сайте не будет часто меняться (количество вкладок и длина текста),
я бы вообще сделал для каждого варианты нажатой вкладки скрин всего меню, т.е.
для приведённого примера сделал бы всего 5 скринов, имя class был бы одинаковый
у всех, менял бы просто скрин
<a class="link_1" href="" onclick=document.write('<style>link_1{background: url(scrin_1.jpg) no-repeat;};</style>')>Разновидности</a>
<a class="link_1" href="" onclick=document.write('<style>link_1{background: url(scrin_2.jpg) no-repeat;};</style>')>Характеристики</a>
и т.д.

Ну или className и т.п. не суть...

Надеюсь, идея понятна.

 

[yaski]

добавить треугольник справа

<div style="width: 0px; height: 0px; background: #fff; border-top: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #333; border-left: 20px solid #333;">&nbsp;</div>

 

[HeadHunter]

Спасибо всем. Вообщем решил полностью на изображениях верстать. Более точно получилось чем на чистом css

 

[websheriff]

Спасибо всем. Вообщем решил полностью на изображениях верстать. Более точно получилось чем на чистом css

может выложишь свое решение, а то как раз сейчас табы решил встроить в проект еще только думаю над реализацией.

 

[HeadHunter]

может выложишь свое решение, а то как раз сейчас табы решил встроить в проект еще только думаю над реализацией.

Для просмотра ссылки Войди или Зарегистрируйся

 

[Girt]

Можно попробовать только border-right картинкой сделать. Или поиграть с элементом after.