CodePen

HTML

            
              <header>
  <nav>
    <div class="blocker left"></div>
    <div class="blocker right"></div>
    <ul>
      <li><a href="#">How</a></li>
      <li><a href="#">Are</a></li>
      <li><a href="#">You</a></li>
    </ul>
  </nav>
</header>
            
          
!

CSS

            
              body {
  font-family: arial;
}
header {
  background: #ccc;
  height: 150px;
  margin: 50px auto;
  position: relative;
  text-align: center;
  width: 700px;
}
nav {
  left: 0;
  position: absolute;
  right: 0;
  top: -30px;
}
ul {
  border-radius: 0 0 200px 200px;
  display: inline-block;
  margin: 0;
  overflow: hidden;
  padding: 0;
}
li {
  background: green;
  display: inline-block;
  text-align: center;
  width: 100px;
}
a {
  color: #fff;
  display: block;
  padding: 5px 0 125px 0;
  text-decoration: none;
}
li:hover {
  background: blue;
}

div.blocker {
  width: 50px;
  height: 150px;
  border: #999 1px solid; /* */
  position: absolute;
  top: 20px;
  cursor: arrow;
}
div.left {
  transform: rotate(-35deg);
  left: 170px;
}
div.right {
  transform: rotate(35deg);
  left: 478px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................