用css制作梯形最常用的方法就是通clip-path来裁剪一个长方形。通过设置polygon属性4个顶点的位置达到效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css制作梯形</title>
<style>
.tx {
width: 400px;
height: 240px;
border: 1px solid rebeccapurple;
text-align: center;
line-height: 240px;
background-color: aquamarine;
clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
}
.tx1 {
width: 400px;
height: 240px;
border: 1px solid rebeccapurple;
text-align: center;
line-height: 240px;
background-color: aquamarine;
clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
}
</style>
</head>
<body>
<h1 class="tx">等腰梯形</h1>
<h1 class="tx1">直角梯形</h1>
</body>
</html>