一、使用css实现梯形

html：

<div class="div">
	这是一个梯形
</div>
做法：通过tansform属性的perspective和rotateX，实现梯形（声明的顺序不能错）。

rotateX是将物体以X轴为旋转轴，进行旋转。
perspective是设置透视的位置，详细解释可以看下面两个博客：
博客一
博客二
css代码如下

.div{
	width:100px;
	height:100px;
	background:green;
	transform: perspective(.5em) rotateX(5deg);
	transform-origin:bottom;
}
 

效果如图：
在这里插入图片描述

 
学完还行练？点这里。