*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  direction: rtl;
  background-color: #fff;
  height: 200vh; /* میخوام صفحه بزرگ باشه تا اسکرول بخوره */
}

.up {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.up img {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.up .down {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: skewY(-10deg);
  -webkit-transform: skewY(-10deg);
  -moz-transform: skewY(-10deg);
  -ms-transform: skewY(-10deg);
  -o-transform: skewY(-10deg);
  transform-origin: top left;
}