Clippy for Nicole Bernstein nav menu
<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.