Для свертывания фильтра из трехугольных кнопок в HTML вы можете использовать различные способы, включая использование CSS и JavaScript. Вот один из возможных подходов:
Создайте HTML структуру фильтра с помощью списка ul и элементов li. Каждому элементу li присвойте класс, который будет указывать на тип фильтра (например, "все", "популярное", "новое" и т. д.):
<ul> <li class="filter active">Все</li> <li class="filter">Популярное</li> <li class="filter">Новое</li> </ul>
Затем добавьте CSS стили для элементов списка и установите задний фон в виде треугольника с помощью элемента ::before:
ul { list-style-type: none; padding: 0; } .filter { display: inline-block; padding: 10px; cursor: pointer; } .filter.active { background-color: #333; color: #FFF; } .filter::before { content: ""; display: inline-block; vertical-align: middle; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid #333; margin-right: 5px; }
Наконец, добавьте JavaScript код, чтобы обрабатывать нажатия на фильтры и добавлять/удалять класс active для подсветки активного фильтра:
<script> var filters = document.getElementsByClassName('filter'); for (var i = 0; i < filters.length; i++) { filters[i].addEventListener('click', function() { var current = document.getElementsByClassName('active'); current[0].className = current[0].className.replace(' active', ''); this.className += ' active'; }); } </script>
Теперь вы можете использовать этот фильтр на вашей веб-странице и стилизовать его с помощью CSS по своему усмотрению. При нажатии на фильтр будет добавлен класс active, что позволит определить активный фильтр и применить соответствующие стили.