Как сделать между двумя блоками такую стрелку с помощью CSS?

Question

Есть два блока, в обоих таходится текст, и соединяються они стрелкой (смотреть на фото). Внимание знатоки, как сделать максимально похожую перемычку?

Спасибо!

Answer 1

Примерно так:

.test {
  display: inline-block;
  width: 100px;
  height: 30px;
  background-color: purple;
  border: 1px solid white;
  border-radius: 5px;
  position: relative;
}

.test:before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 5px solid white;
  border-left: none;
  border-bottom: none;
  border-radius: 5px;
  top: -2px;
  left: calc(50% - 30px);
  transform: rotate(45deg);
}

<div class="test"></div>

БЛОГ НА HUSL

Как сделать между двумя блоками такую стрелку с помощью CSS?

Ответы (1 шт):