css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{margin: 20px;float: left;}
.box,.box1{width: 150px;height: 0; border-bottom: 150px solid #ccc;border-left: 90px solid transparent;border-right: 90px solid transparent;}
.box1{border-radius: 0 0 50% 50%;}
.box3{width: 150px;height: 90px;background: lightblue; border-radius: 50%;}
.box4{width: 150px;height: 90px;background: lightblue;border-radius: 90px;}
.box5{width: 130px;height: 130px;background: tomato;border-radius: 50% 50% 0 0;opacity: .7;}
.box6{width: 300px;height: 50px;background: tomato;border-radius: 0 0 50% 50%;}
</style>
</head>
<body>
<!--梯形-->
<div class="box"></div>
<!--梯形小裙摆-->
<div class="box1"></div>
<!--椭圆-->
<div class="box3"></div>
<!--左右半圆-->
<div class="box4"></div>
<!--罩子-->
<div class="box5"></div>
<!--带子-->
<div class="box6"></div>
</body>
</html>