效果图
- 原理
一个容器内部包着左右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>