JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<div class="square">
  <div class="overflow overflow--top"></div>
  <div class="overflow overflow--bottom"></div>
</div>

<div class="test"></div>

CSS

body {
  margin: 0;
}

@keyframes bob {
  0% {transform: rotate(-45deg) skew(0deg, 0deg) translate(0, 0)},
  100% {transform: rotate(-45deg) skew(45deg, 45deg) translate(-12px, 12px)}
}

.square {
  transform: rotate(45deg);
  display: inline-block;
  margin-top: 17px;
  margin-left: 17px;
}

.overflow {
  width: 80px;
  height: 40px;
  overflow: hidden;
}

.overflow--top {
  background-color: red;
}

.overflow--top::before {
  display: block;
  content: '';
  width: 55px;
  height: 55px;
  margin-top: 12px;
  margin-left: 12px;
  background-color: green;
  transform: rotate(-45deg) skew(45deg, 45deg) translate(-12px, 12px);
  animation-duration: 3s;
  animation-name: bob;
}

.overflow--bottom {
  background-color: blue;
}