本文主要是介绍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:s
这篇关于html5 css3 将长方形图片 切成 直角梯形显示的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!