Треугольники на концах в header меню на CSS

*, 
*:before, 
*:after { 
  box-sizing: border-box; 
} 
 
* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  background: #000; 
} 
 
.navbar {} 
 
.navbar__menu { 
  margin: 15px auto; 
  background: #fff; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  height: 70px; 
  max-width: 700px; 
  border-top: 2px solid green; 
  border-bottom: 2px solid green; 
} 
 
.navbar__item { 
  list-style: none; 
  height: 100%; 
  width: 25%; 
} 
 
.navbar__link { 
  padding-left: 15px; 
  padding-right: 15px; 
  color: #000; 
  position: relative; 
  height: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
 
.navbar__item:first-of-type .navbar__link:before, 
.navbar__item:first-of-type .navbar__link:after, 
.navbar__item:last-of-type .navbar__link:before, 
.navbar__item:last-of-type .navbar__link:after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  width: 0; 
  height: 0; 
  border-style: solid; 
} 
 
.navbar__item:first-of-type .navbar__link:before, 
.navbar__item:first-of-type .navbar__link:after { 
  right: 100%; 
} 
 
.navbar__item:first-of-type .navbar__link:before { 
  top: -2px; 
  border-width: 0 70px 70px 0; 
  border-color: transparent green transparent transparent; 
} 
 
.navbar__item:first-of-type .navbar__link:after { 
  border-width: 0 66px 66px 0; 
  border-color: transparent #fff transparent transparent; 
} 
 
.navbar__item:last-of-type .navbar__link:before, 
.navbar__item:last-of-type .navbar__link:after { 
  left: 100%; 
} 
 
.navbar__item:last-of-type .navbar__link:before { 
  top: -2px; 
  border-width: 70px 70px 0 0; 
  border-color: green transparent transparent transparent; 
} 
 
.navbar__item:last-of-type .navbar__link:after { 
  border-width: 66px 66px 0 0; 
  border-color: #fff transparent transparent transparent; 
} 
 
.navbar__item:hover .navbar__link { 
  background: green; 
  color: #fff; 
} 
 
.navbar__item:hover:first-of-type .navbar__link:after, 
.navbar__item:hover:last-of-type .navbar__link:after { 
  opacity: 0; 
}

<nav class="navbar"> 
  <ul class="navbar__menu"> 
    <li class="navbar__item"><a href="#" class="navbar__link">Link</a></li> 
    <li class="navbar__item"><a href="#" class="navbar__link">Link</a></li> 
    <li class="navbar__item"><a href="#" class="navbar__link">Link</a></li> 
    <li class="navbar__item"><a href="#" class="navbar__link">Link</a></li> 
  </ul> 
</nav>

.nav { 
  width: 100%; 
  background: blue; 
  color: white; 
  -webkit-clip-path: polygon(0 0, 100% 0, 92% 100%, 5% 100%); 
  clip-path: polygon(0 0, 100% 0, 92% 100%, 5% 100%); 
  padding: 5px; 
} 
 
.nav ul{ 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  } 
   
.nav li{ 
  text-transform: uppercase; 
  list-style: none; 
  padding: 0 1rem; 
}

<nav class="nav"> 
  <ul> 
    <li>первый</li> 
    <li>второй</li> 
    <li>третий</li> 
  </ul> 
</nav>