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

效果图如上

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> 
<title>skew test</title> 
<style type="text/css"> 
html,body,div,img{ 
    margin:0; 
    padding:0; 
} 
img{ 
    border:0 none; 
} 
.pic1{ 
    width:220px; 
    height:300px; 
    padding-left:180px; 
    margin-left:-160px; 
    float:left; 
    transform:skew(-50deg,0deg); 
    -ms-transform:skew(-50deg,0deg); /* IE 9 */ 
    -moz-transform:skew(-50deg,0deg); /* Firefox */ 
    -webkit-transform:skew(-50deg,0deg); /* Safari and Chrome */ 
    -o-transform:skew(-50deg,0deg); /* Opera */ 
    overflow:hidden; 
} 
.pic1 img{ 
    transform:skew(50deg,0deg); 
    -ms-transform:skew(50deg,0deg); /* IE 9 */ 
    -moz-transform:skew(50deg,0deg); /* Firefox */ 
    -webkit-transform:skew(50deg,0deg); /* Safari and Chrome */ 
    -o-transform:skew(50deg,0deg); /* Opera */ 
} 
.pic2{ 
    width:400px; 
    height:300px; 
    float:left; 
    margin-left:20px; 
    transform:skew(-50deg,0deg); 
    -ms-transform:skew(-50deg,0deg); /* IE 9 */ 
    -moz-transform:skew(-50deg,0deg); /* Firefox */ 
    -webkit-transform:skew(-50deg,0deg); /* Safari and Chrome */ 
    -o-transform:skew(-50deg,0deg); /* Opera */ 
    overflow:hidden; 
} 
.pic2 img{ 
    margin-left:-180px; 
    transform:skew(50deg,0deg); 
    -ms-transform:skew(50deg,0deg); /* IE 9 */ 
    -moz-transform:skew(50deg,0deg); /* Firefox */ 
    -webkit-transform:skew(50deg,0deg); /* Safari and Chrome */ 
    -o-transform:skew(50deg,0deg); /* Opera */ 
} 
</style> 
</head> 
<body> 
<div class="pic1"> 
    <img src="1.jpg" /> 
</div> 
<div class="pic2"> 
    <img src="2.png" /> 
</div> 
</body> 
</html> 

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