CSS Triangle

dabblet.css

/* CSS Triangle */

* { box-sizing: border-box }

.triangle {
	width: 0; height: 0;
	border-bottom: 50px solid black;
	border-left: 	20px solid transparent;
	border-right: 	70px solid transparent;	
	
	position: relative;
	
	transition: 	1s all;
}

.triangle:hover {
	border-bottom: 100px solid black;
	border-left: 	20px solid transparent;
	border-right: 	120px solid transparent;
}

.triangle:hover:before {
	content: "Hello";
	position: absolute;
	top: 70px;
	left: 0px;
	text-align: center;
	color: white;
	z-index: 99;
}

dabblet.html

<div class="triangle"></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}