如何创建弯曲的导航栏？

Question

我正在尝试创建一个像这样的导航栏。但是我不能完全像这样创建。请帮助我。

<div class="container-fluid">
    <div class="row">
        <div class="col-4 text-right">
            <i class="fa fa-bars"></i>
        </div>
        <div class="col-4 round text-center">
            <img src="images/sss-logo.png" class="sss-logo">
        </div>
        <div class="col-4 text-left">

        </div>
     </div>
 </div>

我这样做：

我需要这样创建：

Answer 1

以下是使用drop-shadow过滤器和渐变的想法：

.header {
  height:50px;
  padding-bottom:50px;
  background: 
    linear-gradient(darkblue,darkblue) right calc(100% - 33px)/calc(50% - 43px) 4px,
    linear-gradient(darkblue,darkblue) left calc(100% - 33px)/calc(50% - 43px) 4px,
    radial-gradient(circle at 50% -20px, transparent 64%,darkblue 66%,darkblue calc(66% + 2px),transparent calc(66% + 3px)) bottom center/100px 35px;
  background-repeat:no-repeat;
  filter:drop-shadow(0 3px 4px #000);
}


body {
 margin:0;
 background:pink;
}

<div class="header">

</div>