Аккордеон с clip-path эффектом / Элементы / Сниппеты Bootstrap

Версия: v1.0.0

Каталог: Сниппеты Bootstrap

Категория: Элементы

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, Laravel, WHMCS

Язык: Русский

Вес файла: 1.6 Kb

Уникальный ID: 5295

Количество символов:

Посмотрели: 1211 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-5295-20

Скачали бесплатно: 34 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 1 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: элемент, аккордеон, element, сниппет, Accordeon, bootstrap 3, bootstrap 4, clip-path, Snippet

Поделился: BootstrapТема

Добавлено: 2022-05-15 в 19:41

Метка: 1652632867

⇄ ⇅

<div class="col-md-6 col-md-offset-3">
 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
 <div class="panel panel-default">
 <div class="panel-heading" role="tab" id="headingOne">
 <h4 class="panel-title">
 <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
 Первая вкладка
 </a>
 </h4>
 </div>
 <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
 <div class="panel-body">
 <p>Свойство clip-path позволяет создавать сложные фигуры в CSS, обрезая элемент до базовой формы (круг, эллипс, многоугольник или вставка) или до источника SVG. CSS-анимации и переходы возможны с двумя или более фигурами clip-path с одинаковым количеством точек.</p>
 </div>
 </div>
 </div>
 <div class="panel panel-default">
 <div class="panel-heading" role="tab" id="headingTwo">
 <h4 class="panel-title">
 <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
 Вторая вкладка
 </a>
 </h4>
 </div>
 <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
 <div class="panel-body">
 <p>Свойство clip-path позволяет создавать сложные фигуры в CSS, обрезая элемент до базовой формы (круг, эллипс, многоугольник или вставка) или до источника SVG. CSS-анимации и переходы возможны с двумя или более фигурами clip-path с одинаковым количеством точек.</p>
 </div>
 </div>
 </div>
 <div class="panel panel-default">
 <div class="panel-heading" role="tab" id="headingThree">
 <h4 class="panel-title">
 <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
 Третья вкладка
 </a>
 </h4>
 </div>
 <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
 <div class="panel-body">
 <p>Свойство clip-path позволяет создавать сложные фигуры в CSS, обрезая элемент до базовой формы (круг, эллипс, многоугольник или вставка) или до источника SVG. CSS-анимации и переходы возможны с двумя или более фигурами clip-path с одинаковым количеством точек.</p>
 </div>
 </div>
 </div>
 </div>
 </div>

</div>
 </div>

BootstrapTema

Аккордеон с clip-path эффектом

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0