JSFiddle - React, Tailwind, and code Playground

by Aniket Suryavanshi

HTML

<div class="wrapper">
<div id="one" class="parent">
<div>
One
</div>
<div class="transformed">

</div>
</div>
<div id="two" class="parent">
<div>
Two
</div>
<div class="transformed">

</div>
</div>
<div id="three" class="parent">
<div>
Three
</div>
</div>
</div>

CSS

.wrapper {
  display: flex;
}
.parent {
  width: 200px;
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.transformed {
  width: 36px;
  height: 36px;
  transform: rotate(45deg) translateY(-26px) translateX(26px);
  transform-origin: top left;
  
}
#one, #three {
  background-color: blue;
}
#one .transformed {
  background-color: blue;
}
#two {
  background-color: pink;
}
#two .transformed {
  background-color: pink;
}