css实现div倾斜效果
- 开源代码
- 2025-08-13 06:45:01
效果如下：
<!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>
css实现div倾斜效果由讯客互联开源代码栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“css实现div倾斜效果”
