Как сделать на css такую стрелку под активным табом?
Ответ
Можно для этого использовать псевдоэлементы с 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;
}
Комментариев нет:
Отправить комментарий