Как сделать округленный div, который соответствует закругленной navbar?

Question

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

это то, что у меня сейчас

вот к чему я стремлюсь

вот мой фрагмент кода

.container {
                            min-height: 100vh;
                            padding: 2rem 1rem;
                        }
                        
                        .navbar {
                            z-index: -1;
                            width: 70%;
                            margin: 0 auto;
                            border-radius: 20rem;
                        }
                        
                       
                        
                        .nav-item {
                            padding: 0;
                        }
                        
                        .book-now {
                            overflow: visible;
                            z-index: 100;
                            background-color: rgba(255, 48, 48, 1);
                            height: match-parent;
                        }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<header class="container">
        <nav class="navbar bg-dark navbar-expand-lg navbar-dark">
            <a class="navbar-brand" href="">MOTRAVELS</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="">CITIES</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="">PLACES</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="">EVENTS</a>
                    </li>

                    <div id="book-now">
                        <a class="nav-link" href="">BOOK NOW</a>

                    </div>


                </ul>
                </div>
        </nav>
    </header>

Answer 1

Может быть так?

.container {
  min-height: 100vh;
  padding: 2rem 1rem;
}

.navbar {
  z-index: -1;
  width: 70%;
  margin: 0 auto;
  border-radius: 20rem;
}

.nav-item {
  padding: 0;
}

.nav-item:last-child {
  background-color: rgba(255, 48, 48, 1);
  height: match-parent;
  border-radius: 0rem 25rem 25rem 0rem;
  margin-right: -0.5rem;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<header class="container">
  <nav class="navbar bg-dark navbar-expand-lg navbar-dark">
    <a class="navbar-brand" href="">MOTRAVELS</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="">CITIES</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">PLACES</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">EVENTS</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">BOOK NOW</a>
        </li>
      </ul>
      </div>
  </nav>
</header>