Как мне сделать такую ​​панель навигации?

Question

В последнее время я наблюдаю тренд навигационных панелей в форме:

Волнистый Навбар

Я хочу создать такую ​​навигационную панель в моем веб-сайт, однако, я не могу понять, как это сделать. Я использую reactjs, поэтому я в основном работаю с Html & CSS. Все, что я пытаюсь, дает мне острые края, как на следующем рисунке:

Мой Navbar

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

Мой код выглядит следующим образом:

.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

Я думаю, что самый простой способ сделать это с изображением:

.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>