0

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

Спасибо!

Визуализация блока

1 ответ 1

4

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

.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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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