JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="MenuBizarre">
	<ul>
		<li><a href="">Menu 1</a></li><!--
	 --><li><a href="">Menu 2</a></li><!--
	 --><li><a href="">Menu 3</a></li><!--
	 --><li><a href="">Menu 4</a></li>
	</ul>
</nav>

CSS

html, body, ul {margin:0;padding:0;}
#MenuBizarre {overflow:hidden;position:absolute;width:500px;height:80px;top:20%;left:50%;margin-left:-250px;border:solid #333;border-top:none;border-radius:0 0 100% 0;transform:skewY(-10deg);}
#MenuBizarre:before {content:"";position:absolute;width:504px;height:50px;top:-28px;border-bottom:solid #333;background:#fff;border-radius:0 0 100% 0;transform:skewY(5deg);}
#MenuBizarre ul {height:100%;}
#MenuBizarre li {display:inline-block;vertical-align:top;width:20%;height:100%;text-align:center;}
#MenuBizarre li+li {border-left:solid #333;}
#MenuBizarre a {display:block;text-decoration:none;font:100%/80px sans-serif;color:#000;}
#MenuBizarre a:hover {color:#fff;background:#333;}
#MenuBizarre li:nth-child(2) a {line-height:87px;}
#MenuBizarre li:nth-child(3) a {line-height:86px;}
#MenuBizarre li:nth-child(4) a {line-height:75px;}