宜昌本地软件开发与弱电工程服务商
项目咨询 · 快速响应
您当前的位置： > 博客2 > Html5技术

[html5]html5+css3实现图片斜角切成直角梯形显示的源代码

2016-10-13 00:16:48 点击量:36 标签: 收藏本文

效果图如上

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> 
  5. <title>skew test</title> 
  6. <style type="text/css"> 
  7. html,body,div,img{ 
  8.     margin:0; 
  9.     padding:0; 
  10. } 
  11. img{ 
  12.     border:0 none; 
  13. } 
  14. .pic1{ 
  15.     width:220px; 
  16.     height:300px; 
  17.     padding-left:180px; 
  18.     margin-left:-160px; 
  19.     float:left; 
  20.     transform:skew(-50deg,0deg); 
  21.     -ms-transform:skew(-50deg,0deg); /* IE 9 */ 
  22.     -moz-transform:skew(-50deg,0deg); /* Firefox */ 
  23.     -webkit-transform:skew(-50deg,0deg); /* Safari and Chrome */ 
  24.     -o-transform:skew(-50deg,0deg); /* Opera */ 
  25.     overflow:hidden; 
  26. } 
  27. .pic1 img{ 
  28.     transform:skew(50deg,0deg); 
  29.     -ms-transform:skew(50deg,0deg); /* IE 9 */ 
  30.     -moz-transform:skew(50deg,0deg); /* Firefox */ 
  31.     -webkit-transform:skew(50deg,0deg); /* Safari and Chrome */ 
  32.     -o-transform:skew(50deg,0deg); /* Opera */ 
  33. } 
  34. .pic2{ 
  35.     width:400px; 
  36.     height:300px; 
  37.     float:left; 
  38.     margin-left:20px; 
  39.     transform:skew(-50deg,0deg); 
  40.     -ms-transform:skew(-50deg,0deg); /* IE 9 */ 
  41.     -moz-transform:skew(-50deg,0deg); /* Firefox */ 
  42.     -webkit-transform:skew(-50deg,0deg); /* Safari and Chrome */ 
  43.     -o-transform:skew(-50deg,0deg); /* Opera */ 
  44.     overflow:hidden; 
  45. } 
  46. .pic2 img{ 
  47.     margin-left:-180px; 
  48.     transform:skew(50deg,0deg); 
  49.     -ms-transform:skew(50deg,0deg); /* IE 9 */ 
  50.     -moz-transform:skew(50deg,0deg); /* Firefox */ 
  51.     -webkit-transform:skew(50deg,0deg); /* Safari and Chrome */ 
  52.     -o-transform:skew(50deg,0deg); /* Opera */ 
  53. } 
  54. </style> 
  55. </head> 
  56. <body> 
  57. <div class="pic1"> 
  58.     <img src="1.jpg" /> 
  59. </div> 
  60. <div class="pic2"> 
  61.     <img src="2.png" /> 
  62. </div> 
  63. </body> 
  64. </html> 

在图片外层做skew的角度变形，通过内层的图片反变形，即加上和外层skew相反的值，做到图片不会跟着变形
通过图片外层div的width，margin，padding属性来控制调整图片显示的多少和位置（这里需要花时间根据图片尺寸慢慢调整）

上一篇： [html5]html5+css3图表功能
下一篇： [php]HTML5文件API
ABOUT US
宜昌农人网络科技有限公司

我们是一家提供综合软件外包与弱电工程服务的技术公司。

业务涵盖定制软件、管理系统、网站、小程序、APP、系统集成、网络布线、监控安防、门禁、机房建设及长期技术维护。

公司地址：湖北省宜昌市伍家岗区东站二路6号三峡（宜昌）大数据产业园海洋馆二楼A203室