<div class="flex-container">
  <div class="before">
<div class="img-area"><img src="http://placehold.jp/400x225.png" alt=""></div>
    <p>before</p>
  </div>
  <div class="after">
<div class="img-area"><img src="http://placehold.jp/666666/FFFFFF/400x225.png" alt=""></div>
    <p>after</p>
  </div>
</div>

.flex-container{
  display:flex;
  justify-content: center;
  align-items: center;
}
.flex-container > div{
  margin:0 30px;
  text-align:center;
}
.flex-container .img-area{
  position:relative;
  min-height:225px;
}
.flex-container .before .img-area::before{
  content:"";
  display:block;
  position: absolute;
  top: 50%;
  left: calc(100% + 15px);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent white;
  z-index:99;
}
.flex-container .before .img-area::after{
  content:"";
  display:block;
  position: absolute;
  top: 50%;
  left: calc(100% + 15px);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 30px;
  border-color: transparent transparent transparent #ebd700;
}