How can I make a navigation bar like this? - html

Question

I've been seeing a trend lately of navigation bars shaped like this:
Wavey Navbar
I want to create such a navbar in my website, however, I can't seem to figure out how to do this.
I'm using reactjs, so I'm basically working with Html & CSS. Everything I try keeps giving me sharp edges like in the next picture:
My Navbar
I'm not even sure that I'm doing it right, but I can't seem to get it to be smooth and the shadow for some reason is not appearing in the half circle.
My code is as follows:
.navbar {
flex-wrap: nowrap;
width: 100vw;
height: 65px;
align-content: stretch;
justify-content: space-between;
position: fixed;
bottom: 0;
left: 0;
box-shadow: 0 -3px 5px 0 rgba(0,0,0,.09);
z-index: 999;
}
.navLink {
width: 20%;
height: 100%;
flex-direction: column;
font-size: xx-small;
justify-content: center;
font-weight: 700;
-webkit-transition: all 1s;
transition: all 1s;
background-color: #FFFFFF;
align-items: center;
}
.selectedLink {
padding-bottom: 25px;
height: 40px;
background-color: white;
background: radial-gradient(circle at top, transparent 34px, #FFF 20px);
display: flex;
flex-direction: row;
}
.icon {
width: 26px;
height: 26px;
}
.selectedLinkImage {
border-radius: 200px;
margin-bottom: 37px;
background-color: #564cac;
padding: 7px;
border: 6px solid transparent;
box-shadow: 0 -3px 5px 0 rgba(0,0,0,.50);
}
<nav class="navbar">
<div class="navLink selectedLink" id="feed-link">
<img class="icon selectedLinkImage" src="/static/media/home-active.9de5b1c3.svg" alt="feed button">
</div>
<div class="navLink" id="discover-link">
<img class="icon" src="/static/media/discover.a882adf8.svg" alt="discover button">
</div>
<div class="navLink" id="map-link">
<img class="icon" src="/static/media/map.9188e95b.png" alt="like button"> </div>
<div class="navLink" id="like-link">
<img class="icon" src="/static/media/heart.754f2ae1.svg" alt="like button"> </div>
<div class="navLink" id="purchase-link">
<img class="icon" src="/static/media/purchased.9bc694d4.svg" alt="purchased button">
</div>
</nav>

Answer 1

I think the easiest way is to do this with an image:
.header {
width: 600px;
height: 250px;
background: rgb(102, 100, 150);
background: linear-gradient(90deg, rgba(102, 100, 150, 1) 0%, rgba(9, 88, 121, 1) 32%, rgba(0, 212, 255, 1) 100%);
position: relative;
padding: 15px;
}
.container {
position: absolute;
width: 600px;
height: 150px;
top: 100px;
display: flex;
flex-direction: row;
}
.circle {
background-color: lightblue;
border-radius: 50%;
width: 130px;
height: 130px;
position: absolute;
left: 75px;
top: 40px;
}
.cutout {
width: 150px;
height: 150px;
background-image: url('data:image/png;base64,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');
}
.left {
width: 50px;
height: 150px;
background-color: white;
border-radius: 15px 0 0 15px;
}
.right {
width: 400px;
height: 150px;
background-color: white;
border-radius: 0 15px 15px 0;
}
<div class="header">
<div class="circle"></div>
<div class="container">
<div class="left"></div>
<div class="cutout"></div>
<div class="right"></div>
</div>
</div>