由于边框半径，侧面可见框阴影

Question

我有一个徽标及其包裹在导航栏上的包装。徽标必须在右下角是圆形的。导航栏和徽标包装器都必须蒙上阴影。

问题是由于边界半径，我的阴影投射在较小屏幕上的导航栏上。

我可以更改导航栏的宽度，使其完全适合侧面并覆盖徽标变形器，但是此解决方案引起了缩放问题。

CSS如下：

#logo-wrapper{
  position: fixed;
  left: 0;
  top: 0;
  height: 12em;
  width: 12em;
  background-color: white;
  text-indent: -9999px;
  background-position: center;
  z-index: 2;
  border-radius: 0% 0% 50% 0%;
  box-shadow: 0 11px rgba(0,0,0,0.25);
}
#logo{
  margin: 2em 0 0 2em;
  height: 8em;
  width: 8em;
  background: url(https://cdn.pixabay.com/photo/2014/03/24/13/42/recycling-294079__340.png) no-repeat;
  background-size: contain;
}
#navbar{
  list-style-type: none;
  display: flex;
  align-content: stretch;
  justify-content: space-around;
  position: fixed;
  left:0;
  top:0;
  width: 100%;
  padding: 0;
  height: 5em;
  line-height: 5em;
  margin: auto;
  text-align:center;
  padding-bottom:0.3em;
  background-color: white;
  /* z-index to go over slider */
  z-index: 1;
  box-shadow: 0 11px rgba(0,0,0,0.25);
}

我正在寻找一种解决方案，使其仍然具有相同的布局/布置，但侧面没有阴影。

要求的HTML代码：

<div class="header">
<div id="logo-wrapper">
<a href="http://<?php echo $_SERVER['SERVER_NAME'];?>/">
<div id="logo"></div>
</div>

<ul id="navbar">

</a>
  <?php
    global $id;
    wp_list_pages( array(
        'title_li'    => '',
        'child_of'    => '2',
        'show_date'   => 'modified',
        'date_format' => $date_format
    ) );
    ?>
  <li id="menu">
    MENU
  </li>
</ul>