09.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexible ellipses</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
  box-sizing: border-box;
  vertical-align: middle;
  display: inline-block;
  width: 300px;
  height: 200px;
  background: #F0DB4F;
}
.fitty {
  border-radius: 50%;
}
.quarter {
  border-radius: 100% 0 0 0;
}
.dome {
  border-radius: 50% / 100% 100% 0 0;
}
</style>
</head>
<body>

<div class="fitty"></div>
<div class="quarter"></div>
<div class="dome"></div>

</body>
</html>