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

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.cont {
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.cont:nth-child(2) {
  border-right: 5px solid #ffcc00;
  overflow: hidden;
  transform: skew(-45deg);
  width: 50%;
  margin-left: -500px;
}

.image {
  width: 100vw;
  height: 100vh;
}

.image1 {
  background-image: url("https://images.unsplash.com/photo-1509483730228-811e47696246?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=1f1280e591d69d9fb49e25ae86f42c09");
  background-size: cover;
}

.image2 {
  background-image: url("https://images.unsplash.com/photo-1514168757508-07ffe9ae125b?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=6f5be3e8bafb9f923e17a9bd1c0ff00a");
  background-size: cover;
  transform: skew(45deg) translatex(500px);
}