JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div class="part">
  <h2>Hexagon</h2>
    <div class="hexa">
      <div class="hex1">
        <div class="hex2">
          <img src="https://lh6.ggpht.com/Qx9Am1VAuwrmOEFuziQ9BHDhCBmEk8VzNyPjMuTYcKlO_My6LWE_gMQh4s8HcZX11A=w300-rw" alt="" width="320" height="313" />
        </div>
      </div>
    </div>
</div>

CSS

/*
 * ==== hexagon
 */
.hexa, .hexa div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 300px;
  height: 300px;
}
.hexa {
  width: 325px;
  height: 230px;
}
.hexa div {
  width: 100%;
  height: 100%;
}
.hexa {
  transform: rotate(120deg);
}
.hex1 {
  transform: rotate(-60deg);
}
.hex2 {
  transform: rotate(-60deg);
}