html - 半径在导航栏中不适应

Question

我在移动底部导航栏上工作。这是我开发的代码:

body {
  background-color: #ff0000;
}

.mobile_bottombar {
		display: flex;
		align-items: center;
		position: fixed;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  height: 60px;
	  padding: 0 12px;
		background-color: #fff;
	  z-index: 999;
	}

	.des:before {  /* creates the circle */
		position: absolute;
		content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z'/></svg>");
  	width: 66px;
  	height: 66px;
  	top: -45px;
  	left: calc(50% - 33px);
  	border-radius: 50%;
    background-color: #188071;
    justify-content: center;
    align-items: center;
    display: flex;
	}

	.des {
  	border-radius: 6px;
  	background: radial-gradient(40px 40px at 50% -11px, rgba(0, 0, 0, 0) 38.5px, #fff);
	}

<div class="mobile_bottombar des">
    <div class="bottombar_item" onclick="switchPage(2, 'main', true)">
      <div>
        <span>Sepp</span>
      </div>
    </div>

    <div style="margin-right: 20px;" class="bottombar_item" onclick="switchPage(3, 'noteslist', true)">
      <div>
        <span>Depp</span>
      </div>
    </div>

    <div style="margin-left: 20px;" class="bottombar_item">
      <div>
        <span>Mepp</span>
      </div>
    </div>

    <div class="bottombar_item" onclick="switchPage(4, 'permission', true)">
      <div>
        <span>Repp</span>
      </div>
    </div>
  </div>

我的问题是 div 的切割半径是蓝色圆圈之外的另一个半径。或者也许还有其他我不知道的问题？不管怎样，这看起来很奇怪，因为圆圈周围的空间不同。但是如何解决呢？
~马塞洛

Answer 1

您可以尝试@Temani 的评论，或者如果您想坚持您的方法，请继续阅读。

我认为没有相对的方法可以做到这一点，所以你所能做的就是像这样硬改变 .des 规则中径向梯度的值:

background: radial-gradient(40px 40px at 50% -11px, rgba(0, 0, 0, 0) 38.5px, #fff);

我还建议您删除 box-shadow 并将其替换为

filter: drop-shadow(0px -2px 1px black);

相反，因为我们可以看到阴影穿过透明区域。