<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box { overflow:hidden; margin-bottom:5px; }
.box div { float:left; margin-right:5px; 50px; height:50px; background:linear-gradient(red,yellow); }
.shape1 { border-radius:0 50% 0 50%; }
.shape2 { border-radius:50% 0 50% 0; }
</style>
</head>
<body>
<div class="box">
<div class="shape1"></div>
<div class="shape2"></div>
</div>
<div class="box">
<div class="shape2"></div>
<div class="shape1"></div>
</div>
</body>
</html>