Radius does not adapt in navigationbar - html

Question

I am working at a mobile bottom navigation bar. Here is the code I developed:
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>
My problem is that the radius which is cut of the div is another radius than the blue circle. Or maybe there is the other problem which I do not know? Anyway, that looks very weired, because of the different space around the circle. But how to fix that?
~marcelo

Answer 1

You can try #Temani's comment or if you want to stick to your method continue the reading.
I think that there is no relative way to do it so all you can do is hard-changing the value of the radial-gradient in the .des rule like this:
background: radial-gradient(40px 40px at 50% -11px, rgba(0, 0, 0, 0) 38.5px, #fff);
I also advice you to remove the box-shadowand replace it with
filter: drop-shadow(0px -2px 1px black);
instead, because we can see the shadow crossing the transparent area.