css实现梯形

一、使用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;
}

效果如图：