<div class="cont">
  <div class="element-1"></div>
  <div class="element-2"></div>
</div>
body {
  padding: 40px;
  font-family: "Oswald", sans-serif;
  background: #eee;
}

.cont {
  width: 100%;
  max-width: 1000px;
  height: 300px;
  display: flex;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.54);
}

.element-1 {
  width: 60%;
  height: 100%;
  position: absolute;
  background: url(http://ewigkeit.ucoz.club/wallpaper/poster-4.jpg) no-repeat
    center center / cover;
  clip-path: polygon(0 0, 100% 0%, 85% 100%, 0px 100%);
  top: 0;
  left: 0;
}

.element-2 {
  position: relative;
  width: 60%;
  height: 100%;
  background: url(http://ewigkeit.ucoz.club/wallpaper/poster-5.jpg) no-repeat
    center center / cover;
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
}

External CSS

  1. https://moonpresence.site/moonpresence/foundation/css/base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.