Untitled

dabblet.css

*{margin: 0; padding: 0;}

pizzabox, slice1, slice2, slice3, slice4 {
	display: block;
	width: 170px;
	height: 170px;
}

pizzabox {
	margin: 140px auto;
	position: relative;
	background: #222;
	overflow: hidden;
}

slice1, slice2, slice3, slice4 {
	position: absolute;
	transform: rotate(45deg);
}

slice1 {
	background: red;
	left: -119px;
}

slice2 {
	background: skyblue;
	right: -119px;
}

slice3 {
	background: purple;
	top: -119px;
}

slice4 {
	background: tomato;
	bottom: -119px;
}

slice1:hover, slice2:hover, slice3:hover, slice4:hover {
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	transform: rotate(0deg);
	z-index: 999
}

dabblet.html

<pizzabox>
	
	<slice1></slice1>
	<slice2></slice2>
	<slice3></slice3>
	<slice4></slice4>
	
</pizzabox>

settings.json

{"view":"split","prefixfree":"1","page":"css"}