8

Как сделать на css такую стрелку под активным табом?
введите сюда описание изображения

2 ответа 2

17

Можно для этого использовать псевдоэлементы с 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>

2
  • благодарю за решение. Кстати хотелось-бы уточнить, в вашем примере пресдоэлемент существует только при наличии класса .active. Может правильней нужно инициализировать псевдоэлементы для всех табов, но скрыть, а потом при добавлении класса active, показывать псевдоэлемент?
    – word
    27 июл 2017 в 19:06
  • @word Можно его и к .block добавить, а при .active только отображать - тут на ваше усмотрение
    – Cheg
    27 июл 2017 в 19:07
4

Вариант с использованием псевдоэлементов (: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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.