Flecha roja sobre cuadrado gris con alpha

dabblet.css

/**
* Flecha roja sobre cuadrado gris con alpha
*/
body {background: url('http://a0.twimg.com/profile_background_images/410163542/tinas2.jpg') no-repeat;}
#cuadrado {
	background: rgba(0,0,0,0.3);
	width: 240px;
	height: 240px;
	padding-top: 30px;
	margin: 50px auto;
	transition: all 1s ease-in-out;

}
#flechurri {
	margin: 0 auto;
	font-size: 0;
	line-height: 0%; 
	width: 0px;
	border-top: 100px solid transparent;
	border-right: 150px solid #fff;
	border-bottom: 100px solid transparent;
	transition: all 1s ease-in-out;
}
	#cuadrado:hover {		
	transform:rotate(360deg);
	}	
	#cuadrado:hover #flechurri {
		transform:rotate(360deg);
		border-color: transparent #f00 transparent;
	}

dabblet.html

<div id="cuadrado">
	<div id="flechurri"></div>
</div>

settings.json

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