Jquery CSS双倾斜容器滑块

我有一个非常规的项目，我想这是可能的

我有两个用边框隔开的集装箱。两者都有偏斜。图片或者文字并没有歪斜——当然，为了有正常的视角，我会在内容中使用相反的歪斜

当我单击“左”或“右”容器时，该容器将设置为全监视器宽度的动画

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

屏幕：

---

以下是它如何工作的起点

div{ 背景尺寸：封面； 高度：200px； 宽度：400px； 溢出：隐藏； 位置：相对位置； 背景重复：无重复； } .a{ 背景图片：url'https://farm9.staticflickr.com/8713/16556277604_bb297ec7a6_z_d.jpg'; } .a>分区{ 位置：绝对位置； 右：-40px； 左边框：20px实心fff； 宽度：220px； 变换：X-20度 } .a>div>div{ 背景图片：url'https://farm9.staticflickr.com/8736/16982940820_01564cbb99_z_d.jpg'; 变换：斜20度； 左边距：-40px； }

---

你能展示一下到目前为止你有什么吗？也许是一个JSFIDLE示例？如果您指的是下面的框：，开发人员在这里做了一个很好的视频：不，不是这样的。一切都会很好，但歪斜会毁掉一切。我想它不能只用css和js来写，也许一些图片将是最好的解决方案。你需要使用一些js来捕获点击事件，但是动画和一切都可以使用CSS3完成-您可以添加/删除动画类等以符合您的要求。请解释原因。a>div>div有左边距：-40px？@AdamRudnicki，因为否则右图片的左下角将无法达到白色歪斜border@AdamRudnicki当然如前所述，我的示例只是一个概念的快速证明，而不是一个完整的解决方案。在我看来，当您需要将容器调整到窗口时，该解决方案并不好。当存在一些向后和向前裕度的计算时，这将是一个好主意左侧：-40px，右侧：-40px。也许解决方案是javasript？