css实现div倾斜效果

效果如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
<style>
*{margin:0;padding: 0;}
.box1{margin:30px 100px;width:100px;height:200px;background:blueviolet;}
.box1{
	transform:rotate(7deg);
	-ms-transform:rotate(7deg); 	/* IE 9 */
	-moz-transform:rotate(7deg); 	/* Firefox */
	-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
	-o-transform:rotate(7deg); 	/* Opera */
 
}
.box2{margin:10px 100px;width:190px;height:418px;background:blue;border: 4px solid blue;}
.box2>img{width: 190px;height: 190px;}
.box2{
	transform:skewX(170deg);
	-ms-transform:skewX(170deg); 	/* IE 9 */
	-moz-transform:skewX(170deg); 	/* Firefox */
	-webkit-transform:skewX(170deg); /* Safari 和 Chrome */
	-o-transform:skewX(170deg); 	/* Opera */
 
}
.box3{margin:10px 100px;width:100px;height:200px;background:pink;}
.box3{
	transform:skewY(160deg);
	-ms-transform:skewY(160deg); 	/* IE 9 */
	-moz-transform:skewY(160deg); 	/* Firefox */
	-webkit-transform:skewY(160deg); /* Safari 和 Chrome */
	-o-transform:skewY(160deg); 	/* Opera */
 
}
</style>
	<body>
		<div class="box1">
			自古逢秋悲寂寥，我言秋日胜春朝。晴空一鹤排云上，便引诗情到碧霄。
		</div>
		<hr />
		<div class="box2">
			<img src='img/kefu.png' />
			<p>自古逢秋悲寂寥，我言秋日胜春朝。晴空一鹤排云上，便引诗情到碧霄。</p>
		</div>
		<hr />
		<div class="box3">
			自古逢秋悲寂寥，我言秋日胜春朝。晴空一鹤排云上，便引诗情到碧霄。
		</div>
		
		<script>
			
		</script>
	</body>
</html>

相关阅读:
JavaScript定义函数，创建函数实例时的内部原理
RK3568平台（显示篇）DRM HDMI驱动程序
价值创造未来：财务规划与资源管理
介绍 TensorFlow 的基本概念和使用场景。
如何使用 UltraEdit 加密和解密您的文本文件
Node详细解释[带你快速入门Node](2)
【iMessage苹果推】群发软件您的通行证类型ID并拒绝您的通行证productable两个父协议
06.JAVAEE之线程4
MySQL列(数据)类型介绍（bit类型实例）
C# 将PDF转为Excel

原文地址：https://blog.csdn.net/spring_007_999/article/details/134346222