Как сделать треугольную стрелку под табом?

Как сделать на 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
}