CSS 两个倾斜的容器滑块

Question

我有非常规的项目，并认为有可能做到这一点。

我有 2 个用边框分隔的容器。两者都有歪斜。图片或文本不会倾斜 - 当然，为了获得正常的视角，我将在内容中使用相反的倾斜。

当我单击左侧或右侧容器时，容器将动画化为完整的显示器宽度

你知道如何构建它以及如何正确设计 css 吗？

屏幕：预览

Answer 1

这是它如何工作的起点。

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>