1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Помогите] Как нарисовать кнопку

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем rudireg, 25 мар 2017.

  1. rudireg

    rudireg

    Регистрация:
    25 мар 2017
    Сообщения:
    1
    Симпатии:
    0
    Привет.
    Задача нарисовать такую кнопку
    [​IMG]
    То есть кнопка с надписью и три треугольника с правового края, у которых можно менять цвет, положение и так далее.

    Требование к коду.
    Разрешается добавлять классы для кнопки, и никаких вложенных блоков.
    То есть код может быть таким:
    HTML:
    <a class="myClass1 myClass2 myClass3 ..." href="#">Моя ссылка</a>
    Тут на помощь приходят ::before и ::after
    Но он позволяют вставить 2 псевдо-элемента, а мне нужно 3 !!!
    У кого какие идеи?
    Прикладываю полный код
    http://codepen.io/anon/pen/QpxOgL
     
  2. spy

    spy

    Регистрация:
    15 янв 2013
    Сообщения:
    468
    Симпатии:
    137
    С помощью псевдоэлементов :before и :after - никак, если бы треугольники пересекались то возможно было бы реализовать.
    Как вариант использовать js и:
    - по класу искать элемент и налаживать картинку одного треугольника
    - или по класу искать элемент и добавить блок (span или div) и его оформить, притом код вы не изменяете(до полной прогрузки DOM) ))
     
    Последнее редактирование: 27 мар 2017
  3. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    115
    Симпатии:
    26
    Последнее редактирование: 27 мар 2017