JSFiddle - React, Tailwind, and code Playground

by Łukasz Cyran

HTML

<div class="parent">
  <img class="image1" src="http://i.imgur.com/9RTLOka.jpg" />
  <img class="image2" src="https://hexnet.org/files/images/hexnet/p-6.png" />
</div>

CSS

.parent {
  position: relative;
}
.image1 {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.image2 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 150px;
  height: 200px;
}