Psychedelic Slice

Sorry, this code snippet failed to load, but you can still check it out over on CodePen!

<div class="curvy-arrow"></div>

html,
body {
	background-color: cornsilk;
	height: 100%;
	position: relative;
}
.curvy-arrow {
	width:  300px;
	height: 300px;
	overflow: hidden;
	position: absolute;
	top:  50%;
	left: 50%;
	cursor: help;
	border-radius: 50%;
	transform: translate3d(-50%, -75%, 0);
	transition: border-radius .5s 1s,
				background-color .5s 2s,
				transform .5s 4s;
	@media( max-width: 500px ) {
		width:  250px;
		height: 250px;
	}
	&:hover {
		background-color: rgba(black, .2);
		border-radius: 0;
		transform: translate3d(-50%, -50%, 0);
		transition: transform .5s,
					background-color .5s 2s,
					border-radius .5s 3s;
	}
	&:before,
	&:after {
		content: "";
		background-color: purple;
		background-color: rebeccapurple;
		width:  50%;
		height: 50%;
		position: absolute;
		top:  50%;
		left: 50%;
		border-radius: 0 0 50% 0;
		transform-origin: top left;
		transition: transform .5s,
					border-radius .5s 1s,
					background-color .5s 3s;
	}
	&:before {
		transform: rotate(60deg);
	}
	&:after {
		transform: rotate(30deg);
	}
	&:hover:before,
	&:hover:after {
		border-radius: 0;
		transition: background-color .5s 1s,
					border-radius .5s 3s,
					transform .5s 4s;
		transform: none;
	}
	&:hover:before {
		background-color: rgba(dodgerblue, .8);
	}
	&:hover:after {
		background-color: rgba(indianred, .8);
	}
}