我有非常规的元素,我认为有可能做到这一点。
我有 2 个用边框分隔的容器。两者都有偏差。图片或文字没有倾斜 - 当然,为了有正常的视角,我会在内容中使用相反的倾斜。
当我点击左边或右边的容器时,容器将动画到全显示器宽度
您知道如何构建它以及如何正确设计 css 吗?
屏幕: Preview
最佳答案
这是它如何工作的起点。
div {
background-size: cover;
height: 200px;
width: 400px;
overflow: hidden;
position: relative;
background-repeat: no-repeat;
}
.a {
background-image: url('https://farm9.staticflickr.com/8713/16556277604_bb297ec7a6_z_d.jpg');
}
.a > div {
position: absolute;
right: -40px;
border-left: 20px solid #fff;
width: 220px;
transform: skewX(-20deg)
}
.a > div > div {
background-image: url('https://farm9.staticflickr.com/8736/16982940820_01564cbb99_z_d.jpg');
transform: skewX(20deg);
margin-left: -40px;
}
<div class="a">
<div>
<div></div>
</div>
</div>
关于jquery - CSS 两个倾斜的容器 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29709382/