当前位置：首页 > news >正文

css实现div倾斜效果

news 来源：原创 2025/5/18 15:40:37

效果如下：

<!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>