Como vc falou que estava usando Bootstrap 3 fiz esse modelo com base no Navbar
original do framework.
Resumidamente são alguns pseudo-elementos com positions
e transforme. Recomendo que vc estudo os detalhes no código CSS para entender o que foi feito.

O elemento branco é um quadrado construído em um pseudo-elemento na própria nabvar
, ele foi rotacionado 45deg
, com um border-radius
e alinhado no centro da navbar
A barra verde tem um box
dentro, esse box
foi alinhado no meio da barra com margim
e depois usei propriedade para transformar o elemento transform: perspective(2.5px) rotateX(-1deg);
Repare que ajustando a perspectiva vc ajusta o angula das laterais do box

Já para fazer a curvatura que na junção do box
com a barra eu usei um pseudo-elemento ::after, esse
::afterna verdade é um quadrado com um radial-gradiente que vai do transparente para a mesma cor de fundo da barra, o verde, nessa imagem eu coloquei vermelho para vc entender melhor como é o elemento. Depois eu coloquei um
transform: skewX(35deg);para ajustar esse elemento com o mesmo angulo da lateral do
box` e ficar tudo direitinho.

Segue o código da imagem acima.
OBS1: Pode ser que vc precise fazer um tratamento responsivo para telas de celulares, minha recomendação é dar um display:none
em todos esse elementos "alegóricos"
OBS2: Deixe a curvatura do lado esquerdo para vc fazer e ver por conta própria como tudo foi montado 😉

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
.navbar-default {
background-image: none;
background-color: #003780;
box-shadow: none;
border: none;
margin-bottom: 0;
border-radius: 0;
position: relative;
z-index: 2
}
.navbar-default::after {
content: "";
width: 260px;
height: 260px;
border-radius: 60px;
box-shadow: 0 0 16px black;
transform: rotate(45deg) translate(-88%, -17%);
transform-origin: center;
background-color: #ffffff;
position: absolute;
left: 50%;
}
.borda {
top: 50px;
left: 0;
width: 100%;
height: 30px;
background-color: #97cd32;
position: absolute;
z-index: 1;
}
.borda::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
/* background-color: red; */
/* border-radius: 50%; */
left: calc(50% - 166px);
top: 30px;
background-image: radial-gradient(circle at bottom left, transparent 0%, transparent 68%, #97cd32 69%);
transform: skewX(35deg);
}
.box {
position:relative;
width: 280px;
height: 100px;
background: #97cd32;
margin: auto;
transform: perspective(2.5px) rotateX(-1deg);
border-radius: 10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="borda">
<div class="box"></div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>