JSFiddle - React, Tailwind, and code Playground

by chriscauley

HTML

<div><div><div><div><div><div><div><div><div><div><div><div><div></div></div></div></div></div></div></div></div></div></div></div></div></div>

CSS

body > div {
  height: 382px;
  left: 0;
  position: relative;
  width: 618px;
}

div > div {
  -webkit-filter: hue-rotate(120deg);
  filter: hue-rotate(120deg);
  height: 61.8%;
  left: 100%;
  position: absolute;
  -webkit-transform: rotate(90deg);
  -webkit-transform-origin: top left;
  transform: rotate(90deg);
  transform-origin: top left;
  top: 0;
  width: 61.8%;
  z-index: 100;
}

div:before, div:after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
}

div:before {
  background: yellow;
  border-radius: 100% 0 0 0;
  box-shadow: inset 12px 0px 15px #1240ab;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 61.8%;
  z-index: 2;
}

div:after {
  background: #f00;
  width: 100%;
  z-index: 1;
}

div:hover div:not(:hover) {
  -webkit-filter: hue-rotate(0deg);
  filter: hue-rotate(0deg);  
}