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>

CSS

body {
  margin: 0;
}

.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,
.overflow--bottom::before {
  content: '';
  display: block;
  width: 56.56px;
  height: 56.56px;
}

.overflow--top::before {
  background-color: green;
  transform: rotate(45deg);
  transform-origin: top left;
  margin-left: 50%;
}

.overflow--bottom::before {
  background-color: green;
transform: rotate(-45deg);
  transform-origin: top left;
}

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