效果图
原理 一个容器内部包着左右2个div，左边的div内部含有一个设置了背景图片的div，运用到的知识点：CSS3视图单位 vw vh 宽高100%，绝对定位，transform skew倾斜， transform-origin 旋转元素基点设定；
制作步骤
1.搭建结构
<
div>
<
div class=
"half half-left">
<
div class=
"content"></
div>
</
div>
<
div class=
"half half-right"></
div>
</
div>
2.设置样式
<style type="text/css">
body{
margin:0;
padding:0;
overflow: hidden;
}
.half{
width:100vw;
height:100vh;
position:absolute;
transform:skew(-20deg);
}
.half-left{
width:100%;
height:100%;
left:-50%;
}
.half-right{
width:100%;
height:100%;
background:greenyellow;
right:-50%;}
</style>
注释：.half 设定为100vw 100vh，视窗满屏，逆时针倾斜20度角，左右两边的div设置宽高都为100%，并作定位，左边为left -50%，右边right：-50%，分居左右两边，右边的设定北京色为greenyellow。
3关键一步
.half-left .content{
width:100%;
height:100%;
background:url(images/1.jpg);
transform:skew(20deg);
transform-origin:100% 0;
}
左边div内部div的样式，宽高100% 设置背景图片，顺时针倾斜20°角 旋转基点为X轴：100%，Y轴：0；即右上角基点
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style type="text/css">
body{
margin:0;
padding:0;
overflow: hidden;
}
.half{
width:100vw;
height:100vh;
position:absolute;
transform:skew(-20deg);
}
.half-left{
width:100%;
height:100%;
background:palegreen;
left:-50%;
}
.half-left .content{
width:100%;
height:100%;
background:url(images/1.jpg);
transform:skew(20deg);
transform-origin:100% 0;
}
.half-right{
width:100%;
height:100%;
background:greenyellow;
right:-50%;}
</style>
</head>
<body>
<div>
<div class="half half-left">
<div class="content"></div>
</div>
<div class="half half-right"></div>
</div>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-969872.html
