Как скопировать это изображение

Question

Я занимаюсь разработкой мобильного приложения для личного проекта. Для мобильного приложения мне нужно скопировать это изображение: Advance Box . Это то, что у меня есть в моем HTML коде:

<div class="bottom-nav">
  <div class="bottom-nav-left"></div>
  <div class="bottom-nav-center"></div>
  <div class="bottom-nav-right"></div>

  <div class="bottom-nav-bottom"></div>

  <div class="outer-circle"></div>
</div>

Я открыт для предложений о том, как решить эту проблему. Это мой css:

.bottom-nav{
  width: 100%;
  height: 8em;
  position: absolute;
  bottom: 0px;
  display: flex;
  justify-content: center;
}

  .outer-circle{
    border-radius: 100%;
    width: 10em;
    height: 10em;
    position: absolute;
    bottom: 2vh;
    background: yellow;
    border: 25px solid rgba(0, 0, 0, 0.1);
  }

  .bottom-nav-bottom{
    height: 3.1em;
    width: 100%;
    background: #fff;
    position: absolute;
    bottom: 0;
  }

  .bottom-nav-left,
  .bottom-nav-right{
    height: 5em;
    width: 41%;
    position: absolute;
  }

  .bottom-nav-left{
    left: 0;
    background: #fff;
    border-radius: 10% 18% 0% 0% / 48% 75% 0% 0% ;
    background: #fff;
  }

  .bottom-nav-center{
    background: #fff;
    height: 5em;
    width: 19%;
  }

  .bottom-nav-right{
    background: #fff;
    right: 0;
    border-radius: 18% 0% 0% 0% / 75% 0% 0% 0% ;
  } 

Мой div с class="bottom-nav-bottom" находится в нижней части div, тогда мой class="outer-circle" находится посередине, а остальные три div находятся поверх "bottom-nav-bottom"