JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="menu">
		<ul>
			<li><a href="#"><span>Ahoj</span></a></li>
			<li><a href="#"><span>světe</span></a></li>
			<li><a href="#"><span>Jak</span></a></li>
			<li><a href="#"><span>se</span></a></li>
			<li><a href="#"><span>máš</span></a></li>
		</ul>
	</nav>

CSS

#menu{
	clip-path: url("#menuClip");
	width: 500px;
	height: 150px;
	background-color:red;
	display:block;
	position:relative;
	overflow:hidden;
}
#menu::before {
	top:-25px;
	position:absolute;
	width: 500px;
	height:50px;
	display:block;
	content:" ";
	border-radius: 0 0 100% 100%;
	background-color:green;
}
#menu::after {
	bottom:-25px;
	position:absolute;
	width: 500px;
	height:50px;
	display:block;
	content:" ";
	border-radius: 100% 100% 0 0;
	background-color:green;
}

#menu ul {
	list-style: none;
	margin:0;
	padding:0;
	border:0;
	width:100%;
	height:100%;
	display:inline-table;
}
#menu ul li {
	width: 100px;
	float:left;
	height: 150px;
	display:table;
	vertical-align:middle;
	text-align:center;
}
#menu ul li a {
	display:table-cell;
	vertical-align:middle;
	width:100%;
	height:100%;
	text-decoration:none;
	color:black;
	
}
#menu ul li:hover {
	background-color: yellow;
}