html5 css3 将长方形图片 切成 直角梯形显示 分类： HTML5 css3 skew 梯形 图片 2014-09-30 13:40 781人阅读 评论(0) 收藏


效果图如上

<!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属性来控制调整图片显示的多少和位置（这里需要花时间根据图片尺寸慢慢调整）

版权声明：本文为博主原创文章，未经博主允许不得转载。

posted @ 2014-09-30 13:40  snow_finland  阅读(1793)  评论(1)  编辑  收藏  举报