css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{margin: 20px;float: left;}
.box7{width: 100px;height: 50px;background: lawngreen; transform: skew(20deg);}
.box8{width: 100px;height: 50px;background: lawngreen; transform: skew(-20deg);}
.box9{width: 0;height: 0;border-right: 40px solid red;border-bottom: 40px solid red;border-radius: 0 50% 50%;transform: rotate(45deg);}
.box10{width: 0;height: 80px;border-left: 40px solid yellowgreen;border-right: 40px solid yellowgreen;border-bottom: 40px solid transparent;}
.box11{width: 100px;height: 50px;background: lightcoral;border-radius: 100px 100px 0 0;}
.box12{width: 50px;height: 50px;background: lightcoral;border-radius: 100px 0 0 0;}
.box13{width: 0px;height: 0px;border: 50px solid lightcoral;border-top-color: transparent;border-radius: 50px;}
.box14{width: 100px;height: 100px;background: lightpink;transform: skew(50deg);transform: rotate(45deg);}
</style>
</head>
<body>
<!--平行四方形-->
<div class="box7"></div>
<div class="box8"></div>
<!--水滴-->
<div class="box9"></div>
<!--标签页-->
<div class="box10"></div>
<!--半圆-->
<div class="box11"></div>
<div class="box12"></div>
<div class="box13"></div>
<!--菱形-->
<div class="box14"></div>
</body>
</html>