JSFiddle - React, Tailwind, and code Playground

by Herbert Braun

HTML

<script src="https://s33.postimg.cc/scmp2tqin/mpl.routing.icons.png"></script>
<head>

</head>

<body>
  <div id="modern">
    <img alt="arrow up" src="https://s33.postimg.cc/scmp2tqin/mpl.routing.icons.png" class="sprite sprite-1 " />
    <img alt="arrow down right" src="https://s33.postimg.cc/scmp2tqin/mpl.routing.icons.png" class="sprite sprite-2 " />
    <img alt="arrow up right" src="https://s33.postimg.cc/scmp2tqin/mpl.routing.icons.png" class="sprite sprite-3 " />
  </div>

  <div id="supports-ie">
    <img alt="arrow up" src="https://s33.postimg.cc/scmp2tqin/mpl.routing.icons.png" class="sprite sprite-1 " />
    <img alt="arrow down right" src="https://s33.postimg.cc/scmp2tqin/mpl.routing.icons.png" class="sprite sprite-2 " />
    <img alt="arrow up right" src="https://s33.postimg.cc/scmp2tqin/mpl.routing.icons.png" class="sprite sprite-3 " />
  </div>
</body>

CSS

.sprite {
  height: 20px;
}

#modern .sprite {
  width: 20px;
  object-fit: none;
}

#modern .sprite-1 {
  object-position: 0 0;
}

#modern .sprite-2 {
  object-position: -20px 0;
}

#modern .sprite-3 {
  object-position: -60px 0;
}

/* Legacy style */

#supports-ie .sprite {
  width: 240px;
}

#supports-ie .sprite-1 {
  clip-path: polygon(0 0, 20px 0, 20px 20px, 0 20px);
  margin-right: -220px;
}

#supports-ie .sprite-2 {
  clip-path: polygon(20px 0, 40px 0, 40px 20px, 20px 20px);
  margin-left: -20px;
  margin-right: -200px;
}

#supports-ie .sprite-3 {
  clip-path: polygon(60px 0, 80px 0, 80px 20px, 60px 20px);
  margin-left: -60px;
  margin-right: -160px;
}