视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > 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. } 
  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属性来控制调整图片显示的多少和位置（这里需要花时间根据图片尺寸慢慢调整）

热门文章推荐

请稍候...

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

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