how to to make a rounded div that fits with a rounded navbar? - html

Question

I wanna make that red div fit with the corners and the height of the navbar. I have been working with bootstrap components and trying to adapt it to what I want.
if there is a way to use a button instead of a div will be fine too, I just want it to fit with the size of the navbar.
that's what I have right now
that's what I aim for
here is my code snippet
.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

May be like this ?
.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>