JSFiddle - React, Tailwind, and code Playground

by mikapon

HTML

<div class="hex-wrap">
  <div class="hex">
    <img src="https://techglimpse.com/wp-content/uploads/2014/10/7.jpg" alt="">
  </div>  
</div>

CSS

body {
  background-color: black;
}
.hexd-wrap {
  width: 250px;
  height: 250px;
}
.hex  {
  position:relative;
  margin:auto;
  text-align:center;
  overflow:hidden;
  white-space:nowrap;
  display:table;
  float:left;
  margin-right:20px;
}
.hex:before {
  content:'';
  padding-top:120%;
  display:inline-block;
  vertical-align:middle;
}
.hex:after {
  content:'';
  position:absolute;
  top:0%;
  left:-10%;
  width:120%;
  padding-top:120%;
  transform: rotatex(52deg) rotate(45deg);
  text-align:center;
  box-shadow:0 0 0 200px white;
}
.hex img {
  display:inline-block;
  vertical-align:middle;
  margin:0 -10px;
}