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

Тема в разделе "Верстка", создана пользователем kadurinho, 1 апр 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. kadurinho

    kadurinho Shop Script

    Moderator
    Регистр.:
    21 июн 2011
    Сообщения:
    627
    Симпатии:
    257
    Всем привет. Столкнулся с задачей сделать скошенные углы у вкладок (jquery табы)
    В итоге должно получится такое http://clip2net.com/clip/m99431/1396336177-clip-5kb.png
    Как не пробую не получается. С меня на печеньки
     
  2. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.451
    Симпатии:
    677
    Для начала нужно расписать как будет выглядеть 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 и т.п. не суть...

    Надеюсь, идея понятна.
     
    Последнее редактирование: 1 апр 2014
    kadurinho нравится это.
  3. yaski

    yaski

    Регистр.:
    21 фев 2010
    Сообщения:
    501
    Симпатии:
    301
    добавить треугольник справа
    Код:
    <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>
     
    kadurinho нравится это.
  4. kadurinho

    kadurinho Shop Script

    Moderator
    Регистр.:
    21 июн 2011
    Сообщения:
    627
    Симпатии:
    257
    Спасибо всем. Вообщем решил полностью на изображениях верстать. Более точно получилось чем на чистом css
     
  5. websheriff

    websheriff Создатель

    Регистр.:
    23 мар 2014
    Сообщения:
    17
    Симпатии:
    4
    может выложишь свое решение, а то как раз сейчас табы решил встроить в проект еще только думаю над реализацией.
     
  6. kadurinho

    kadurinho Shop Script

    Moderator
    Регистр.:
    21 июн 2011
    Сообщения:
    627
    Симпатии:
    257
    http://jsfiddle.net/WuT2M/
     
    bork75 нравится это.
  7. Girt

    Girt Постоялец

    Регистр.:
    11 фев 2012
    Сообщения:
    87
    Симпатии:
    62
    Можно попробовать только border-right картинкой сделать. Или поиграть с элементом after.