Cacher is the code snippet organizer for pro developers

<div class="shape"></div>
<div class="nav-test">Home</div>

// I modified the CSS auto-generated by Clippy in Codepen to suit my needs
// Will probably need to:
// 1) add a first class for very left nav item
// 2) margin-left: -40px (or whatever) to make subsequent nav items overlap on left side

.shape {
	width: 280px;
	height: 180px;
	background: #1e90ff;
	-webkit-clip-path: ellipse(66% 100% at 73% 78%);
clip-path: ellipse(66% 100% at 73% 78%);
  float: left;
}

/* Center the demo */
html, body { height: 100%; }
body {
}

.nav-test {
text-align: left;
margin-left: 40px;
margin-top: -40px;
color: #000;
float: left;
width: 100%;
position: relative;
}

http://bennettfeely.com/clippy/
Clippy method is explained in these gists.

However, I will also try creating the shapes using svg.