JemiloII/dabblet.css

## dabblet.css
/**
 * Make div with bottom triangle (SO)
 * http://stackoverflow.com/questions/12251149/make-div-with-bottom-triangle/
 */
html { background: darkgrey; }
.box {
	box-sizing: border-box;
	position: relative;
	width: 200px;
	height: 50px;
	background: blue;
	overflow: hidden;
}
.box:before {
position: absolute;
	width: 10px;
	height: 10px;
	bottom: 0;
	transform-origin: bottom left;
	transform: rotate(45deg);
	background: white;
	margin: 0px auto;
	content: ''
}
.box:hover, .box:hover:before {
	background: plum;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class='box'>text goes here... hover me ;)</div>

## settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Make div with bottom triangle (SO)
	* http://stackoverflow.com/questions/12251149/make-div-with-bottom-triangle/
	*/
	html { background: darkgrey; }
	.box {
	box-sizing: border-box;
	position: relative;
	width: 200px;
	height: 50px;
	background: blue;
	overflow: hidden;
	}
	.box:before {
	position: absolute;
	width: 10px;
	height: 10px;
	bottom: 0;
	transform-origin: bottom left;
	transform: rotate(45deg);
	background: white;
	margin: 0px auto;
	content: ''
	}
	.box:hover, .box:hover:before {
	background: plum;
	}
	<!-- content to be placed inside <body>…</body> -->
	<div class='box'>text goes here... hover me ;)</div>