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

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

TAB1

TAB2

TAB3

TAB4