<figure>
  <img src="https://images.unsplash.com/photo-1501820488136-72669149e0d4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
</figure>

figure {
  position: relative;
  --clip: polygon(0 0, 100% 0, 100% calc(100% - 50px), 50% 100%, 0 calc(100% - 50px));
}

figure::before,
figure::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  clip-path: var(--clip);
  background-color: #673ab7;
  opacity: 0.35;
  z-index: 1;
}

figure::before {
  height: calc(100% + 20px);
}

figure::after {
  height: calc(100% + 10px);
}

img {
  display: block;
  width: 100%;
  clip-path: var(--clip);
}