Как сделать такую стрелку у табов?

// для демонстрации переключения табов 
$('.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>

.block { 
    background: #fff; 
    width: 70px; 
    text-align: center; 
    padding: 20px 0; 
    float: left; 
    border-bottom: 1px solid #999; 
    position: relative; 
} 
.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;     
}

<div class="block"> 
    TAB1 
</div> 
<div class="block active"> 
    TAB2 
</div> 
<div class="block"> 
    TAB3 
</div> 
<div class="block"> 
    TAB4 
</div>