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); }
<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>