JSFiddle - React, Tailwind, and code Playground

by learner73

HTML

<div class="frame-1">
  <img src="http://media.npr.org/assets/img/2013/03/11/istock-4306066-baby_custom-aee07650b312c1f240125b669c2aa92a7d36e73b-s900-c85.jpg">
</div>

<div class="frame-2">
  <img src="http://media.npr.org/assets/img/2013/03/11/istock-4306066-baby_custom-aee07650b312c1f240125b669c2aa92a7d36e73b-s900-c85.jpg">
  <div class="mask"></div>
</div>

CSS

.frame-1 {
  width: 300px;
  height: 320px;
  margin-bottom: 50px;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 98%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 98%, 0% 75%, 0% 25%);
}

div img {
  max-width: 100%;
  height: 320px;
}

.frame-2 {
  width: 300px;
  height: 320px;
  position: relative;
  /*background: url('http://i.imgur.com/x95q6Lf.png') no-repeat;*/
}
.mask {
  /*background: url('http://i.imgur.com/x95q6Lf.png') no-repeat;*/
  background: url('http://i.imgur.com/M40TJ9Z.png') no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0
}