JSFiddle - React, Tailwind, and code Playground

by lonking

HTML

<div class="part">
  <h2>Hexagon</h2>
    <div class="hexa">
      <div class="hex1">
        <div class="hex2">
          <img src="http://nexceris.com/wp-content/uploads/2014/04/bokeh-cover-bg.jpg" alt="" width="320" height="313" />
        </div>
      </div>
    </div>
</div>

CSS

.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);
}