JSFiddle - React, Tailwind, and code Playground

by Gustavo Juan

HTML

<div class="hexagon hexagon1">
  <div class="hexa gon">
    <img src="http://lorempixel.com/50/50/people" alt="">
  </div>
</div>

CSS

.gon {
  width: 45px;
  height: 45px;
  margin: 0 auto;
  display: inline;
}
.gon:hover {
  color: #fff;
  text-shadow: 0 0 10px white;
}
.hexa {
  width: 45px;
  height: 45px;
  -webkit-clip-path: polygon(75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%, 25% 5%);
  clip-path: polygon(75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%, 25% 5%);
  -moz-clip-path: polygon(75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%, 25% 5%);
  -ms-clip-path:polygon(75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%, 25% 5%); 
}
.hexa img{
  width: 45px;
  height: 45px;
}