CSS arrow with background image

The arrow is visually a part of the main container and the background image is continuous between the elements.

by otinanaipali

HTML

<div class="parent">
  <div class="wrap">
    <div class="img"></div>
  </div>
</div>

CSS

body,
html {
  padding: 0;
  margin: 0;
}

.parent {
  height: 2000px
}

.wrap {
  width: 600px;
  height: 600px;
  background: #c0cfd7;
}

.img {
  width: 50%;
  height: 100%;
  background: url('http://www.art-prints-on-demand.com/kunst/gustav_klimt/klimt_die_erwartung.jpg') no-repeat scroll left top transparent;
  position: relative;
}

.img::after {
  content: "";
  display: block;
  border: 20px solid #c0cfd7;
  border-left: 20px solid transparent;
  position: absolute;
  left: 100%;
  top: 10%;
  background-image: inherit;
  background-position: right 11.111% center;
  margin-top:-20px
}