This might be helpful: Codepen Link

<div class="outerbox">
  <div class="innerbox select">
    Home
</div>
  <div class="innerbox select">
    Contact
</div>
  <div class="innerbox">
    Profile
</div>
</div>

.outerbox {
  overflow: hidden;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100px;
  background-color: red;
  padding: 20px 0 20px 20px;
  color: #fff;
}

.innerbox {
  padding: 1.5rem 10px;
  position: relative;
  background-color: red;
  transition: all 0.3s ease;
}


.select::after {
  position: absolute;
  top: -20px;
  right: 0;
  content: "";
  width: 120px;
  height: 30px;
  background-color: red;
  border-radius: 100px;
}

.select::before {
  position: absolute;
  content: "";
  width: 120px;
  height: 30px;
  border-radius: 100px;
  background-color: red;
  bottom: -20px;
  right: 0;
}

.innerbox:hover {
  background-color: white;
  color: red;
}