Hello! Help create a button with a triangle when you click on it. Here it is: http://joxi.ru/823vVv3UJq67wm (when you click on the button - it has an additional element. Triangle)

    2 answers 2

    It can be created via the before pseudo-element. Here is an example .

      The easiest way

       // Просто для визуализации $('.menu a').on('click',function(){ $('.menu a.active').removeClass('active'); $(this).addClass('active'); }); 
       .menu { display: block; width: 100%; height: 50px; } .menu a { display: inline-block; padding: 0 10px; height: 50px; line-height: 50px; position: relative; /* Обязательно */ color: #000; text-decoration: none !important; } /* Создаём треугольник при помощи псевдо-элемента */ .menu a::after { content: ''; display: block; width: 0; height: 0; border: 8px solid transparent; /* Ширина уголка a=8, высота будет a/2 */ position: absolute; bottom: -16px; left: calc(50% - 8px); } .menu a:hover, .menu a.active { background: #1cde40; color: #fff; } /* Чтобы стрелка смотрела вниз, нужно цвет определить для верхнего бордюра. Чтобы вверх - вниз, влево - для правого и т.д. */ .menu a.active::after { border-top-color: #1cde40; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="menu"> <a class="active" href="#">Index 1</a> <a href="#">Index 2</a> <a href="#">Index 3</a> <a href="#">Index 4</a> <a href="#">Index 5</a> </div>

      • Thank you so much!!! - Dmitry Pinchuk