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>

CSS两个倾斜的容器滑块

1 个答案: