2 ответа
Можно для этого использовать псевдоэлементы с border
:
// для демонстрации переключения табов
$('.block').on('click', function() {
$('.block').removeClass('active');
$(this).addClass('active');
})
.block {
width: 70px;
text-align: center;
padding: 20px 0;
float: left;
border-bottom: #000 solid 1px;
position: relative;
cursor: pointer;
}
.block:before,
.block:after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
position: absolute;
left: 50%;
top: 100%;
margin-left: -10px;
transition: all 0.2s ease;
border-width: 0px 10px 0 10px;
}
.block:before {
border-top-color: #000;
}
.block:after {
border-top-color: #fff;
margin-top: -1px;
}
.block.active:before,
.block.active:after {
border-width: 10px 10px 0 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
TAB1
</div>
<div class="block active">
TAB2
</div>
<div class="block">
TAB3
</div>
<div class="block">
TAB4
</div>
-
благодарю за решение. Кстати хотелось-бы уточнить, в вашем примере пресдоэлемент существует только при наличии класса .active. Может правильней нужно инициализировать псевдоэлементы для всех табов, но скрыть, а потом при добавлении класса active, показывать псевдоэлемент?– wordCommented 27 июл. 2017 в 19:06
-
@word Можно его и к .block добавить, а при .active только отображать - тут на ваше усмотрение– ChegCommented 27 июл. 2017 в 19:07
Вариант с использованием псевдоэлементов (:before
и :after
) + transform: rotate
(function() {
$('.block').on('click', function() {
$(this).addClass('active').siblings().removeClass('active');
});
})();
.block {
background: #fff;
width: 70px;
text-align: center;
padding: 20px 0;
float: left;
border-bottom: 1px solid #999;
position: relative;
cursor: pointer;
}
.block.active{
color: #f00;
cursor: text;
}
.block.active::before,
.block.active::after {
content: '';
position: absolute;
left: 50%;
bottom: -6px;
background: #999;
margin-left: -5px;
width: 10px;
height: 10px;
z-index: 1;
transform: rotate(45deg);
}
.block.active::after {
background: #fff;
bottom: -4px;
height: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block active">
TAB1
</div>
<div class="block">
TAB2
</div>
<div class="block">
TAB3
</div>
<div class="block">
TAB4
</div>