JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chart">
<a id="red">
<img src="http://calebevans.me/projects/jcanvas/images/fish.jpg" alt=""></a>
<a id="green"></a>
<br />
<a id="blue"></a>
<a id="yellow"></a>
</div>

CSS

.boxinbox{
 -webkit-transform: rotate(-45deg);   
}
#chart {
  -webkit-transform: rotate(45deg);
  position: absolute;
  top:100px;
  left: 100px;
}
#chart > a {
 display: inline-block;
 float: left;
 position: relative;
 width: 100px;
 height: 100px; 
 margin: 5px;
 -webkit-transition: -webkit-transform .25s ease-in-out;
overflow: hidden;
}
#chart > a:hover {
 -webkit-transform: scale(1.5);
}
#red {
 border-top-left-radius: 100%;
 -webkit-transform-origin: 100% 100%;
}
#green {
 background: #696;   
 border-top-right-radius: 100%; 
 -webkit-transform-origin: 0% 100%;
}
#blue {
 background: #36a;
 border-bottom-left-radius: 100%;
 -webkit-transform-origin: 100% 0%;
}
#yellow {
 background: #fc3;
 border-bottom-right-radius: 100%;
 -webkit-transform-origin: 0% 0%;
}
img{
 -webkit-transform: rotate(-45deg);
 margin:0px 0px 0px -25px;
}