效果如下：
<!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>
