·您当前的位置:首页 > 技术教程 > Html5技术 >

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

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

效果图如上

  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. img{ 
  11.     border:0 none; 
  12. .pic1{ 
  13.     width:220px; 
  14.     height:300px; 
  15.     padding-left:180px; 
  16.     margin-left:-160px; 
  17.     float:left; 
  18.     transform:skew(-50deg,0deg); 
  19.     -ms-transform:skew(-50deg,0deg); /* IE 9 */ 
  20.     -moz-transform:skew(-50deg,0deg); /* Firefox */ 
  21.     -webkit-transform:skew(-50deg,0deg); /* Safari and Chrome */ 
  22.     -o-transform:skew(-50deg,0deg); /* Opera */ 
  23.     overflow:hidden; 
  24. .pic1 img{ 
  25.     transform:skew(50deg,0deg); 
  26.     -ms-transform:skew(50deg,0deg); /* IE 9 */ 
  27.     -moz-transform:skew(50deg,0deg); /* Firefox */ 
  28.     -webkit-transform:skew(50deg,0deg); /* Safari and Chrome */ 
  29.     -o-transform:skew(50deg,0deg); /* Opera */ 
  30. .pic2{ 
  31.     width:400px; 
  32.     height:300px; 
  33.     float:left; 
  34.     margin-left:20px; 
  35.     transform:skew(-50deg,0deg); 
  36.     -ms-transform:skew(-50deg,0deg); /* IE 9 */ 
  37.     -moz-transform:skew(-50deg,0deg); /* Firefox */ 
  38.     -webkit-transform:skew(-50deg,0deg); /* Safari and Chrome */ 
  39.     -o-transform:skew(-50deg,0deg); /* Opera */ 
  40.     overflow:hidden; 
  41. .pic2 img{ 
  42.     margin-left:-180px; 
  43.     transform:skew(50deg,0deg); 
  44.     -ms-transform:skew(50deg,0deg); /* IE 9 */ 
  45.     -moz-transform:skew(50deg,0deg); /* Firefox */ 
  46.     -webkit-transform:skew(50deg,0deg); /* Safari and Chrome */ 
  47.     -o-transform:skew(50deg,0deg); /* Opera */ 
  48. </style> 
  49. </head> 
  50. <body> 
  51. <div class="pic1"> 
  52.     <img src="1.jpg" /> 
  53. </div> 
  54. <div class="pic2"> 
  55.     <img src="2.png" /> 
  56. </div> 
  57. </body> 
  58. </html> 

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

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器