css окаймленная панель навигации с React

Question

Я бэкэнд-девелопер, сейчас работаю над интерфейсом, в любом случае мне нужно создать рамку навигации с рамкой, которая выглядит следующим образом.

Я пытался заставить это работать, но так и не получил нужный результат.Не могли бы вы указать мне?Спасибо

Дизайн панели навигации:

РЕДАКТИРОВАТЬ: из-за моей глупости я перефразирую.

ЧтоМне нужен тумблер с 3 предметами:

ПУНКТ А |ПУНКТ Б |ПУНКТ C

спасибо

Answer 1

.nav-container{
  width: 300px;
  border: 1px solid #2B82B3;
  border-radius: 10px;
  display: flex;
  overflow: hidden;
}

.item{
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.item:hover{
  color: white;
  background-color: #2B82B3;
}

.spacer{
  width: 1px;
  background-color: #2B82B3;
}

<div class="nav-container">
  <div class="item">1</div>
  <div class="spacer"></div>
  <div class="item">
    Text<br />
    text
  </div>
  <div class="spacer"></div>
  <div class="item">2</div>
</div>