css实现圆角梯形

 代码及实现效果如下

<style type="text/css">
	.text{
		width: 80px;
		height: 80px;/* 宽高 */
		background-color: brown;/* 颜色 */
		border-radius: 8px;/* 设置圆角 */
		transform: perspective(8px)scale(1.1, 1.3) rotateX(5deg);
		/* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
		transform-origin: bottom left;
		/* bottom left = left bottom = 0 100% 中心点偏移量*/
		border: 1px solid #ff9900;
		/* 边框 */
	}
</style>


<div class="text"></div>

<style type="text/css">
	.text{
		width: 80px;
		height: 80px;/* 宽高 */
		background-color: brown;/* 颜色 */
		border-radius: 8px;/* 设置圆角 */
		transform: perspective(8px)scale(1.1, 1.3) rotateX(-5deg);
		/* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转-5度 */
		transform-origin: top left;
		/* top left = left top = 0 0中心点偏移量*/
		border: 1px solid #ff9900;
		/* 边框 */
	}
</style>


<div class="text"></div>