如何在底部导航栏中心添加带凹口的浮动动作按钮？

<nav class="bottom-navbar">
  <!-- 导航栏内容 -->
  <div class="action-button">
    <button class="floating-button">
      <i class="fa fa-plus"></i>
    </button>
  </div>
</nav>

.bottom-navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #f2f2f2;
}

.action-button {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.floating-button {
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
  font-size: 24px;
  color: #333;
}

.floating-button i {
  display: block;
  margin-top: 50%;
  transform: translateY(-50%);
  text-align: center;
}