JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div id="btn-0" class="btn">
    <div>
      <img src="https://secure.gravatar.com/avatar/e03c6ccb0547b0af91afd7aaaa8c201a?d=http://forum.gmclan.org/uploads/monthly_2017_08/59878d42ec8bb_.png.87fb8f02511080dd4bbee8636465a898.png">
    </div>
  </div>
  <div id="btn-1" class="btn">
    <div>
      <img src="http://i2.wp.com/forum.gmclan.org/uploads/monthly_2017_08/M.png.3b83ed74894bfb4bfd67a7ac6b86bc43.png">
    </div>
  </div>
  <div id="btn-2" class="btn">
    <div>
      <img src="http://forum.gmclan.org/uploads/av-23.gif">
    </div>
  </div>
</div>

CSS

body {
  background: #202020;
  margin: 0;
  padding: 0;
  border: 0;
}

.container {
  margin: 0;
  padding: 0;
  border: 0;
}

.btn {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  width: 200px;
  height: 100px;
  transform: skewX(-45deg);
  cursor: pointer;
  overflow: hidden;
}

.btn>div {
  transform: skewX(45deg);
  background: white;
  width: 150%;
  height: 100%;
  margin-left: -25%;
}

.btn>div>img {
  width: 100%;
  min-width: 100%;
  height: 100%;
}

#btn-0 {
  background: #FF0000;
  left: 50px;
}

#btn-1 {
  background: #00FF00;
  left: 250px;
}

#btn-2 {
  background: #0000FF;
  left: 450px;
}

JavaScript

const elms = document.getElementsByClassName('btn');
if (!!elms && elms.length > 0) {
  Array.from(elms).map(elm => {
    elm.onclick = () => alert(elm.id);
  });
}