sorahn/dabblet.css

## dabblet.css
/**
 * css gradient for triangle shaped arrow (SO)
 * http://stackoverflow.com/q/12431596/1397351
 */
.shape {
	float: left;
	position: relative;
	border: 1px solid #ccc;
	border-right: none;
	width: 240px; height: 80px;
	background: linear-gradient(white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6);
	cursor: pointer;
}
.shape:after {
	position: absolute;
	top: 50%; right: -29px; /* this number looks god, but I'd love to be able to get it programatically with SCSS/LESS */
	border-top: solid 1px #ccc;
	border-right: solid 1px #ccc;
	width: 56.56px; height: 56.56px; /* (sqrt(2)/) * 80 */
	transform: scaleX(0.6) translateY(-50%) rotate(45deg); /* create a rhombus */
	background: linear-gradient(-45deg, #f6f6f6, #e1e1e1 43%, #f1f1f1 63%, white);
	content: ''
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class='shape'></div>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* css gradient for triangle shaped arrow (SO)
	* http://stackoverflow.com/q/12431596/1397351
	*/
	.shape {
	float: left;
	position: relative;
	border: 1px solid #ccc;
	border-right: none;
	width: 240px; height: 80px;
	background: linear-gradient(white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6);
	cursor: pointer;
	}
	.shape:after {
	position: absolute;
	top: 50%; right: -29px; /* this number looks god, but I'd love to be able to get it programatically with SCSS/LESS */
	border-top: solid 1px #ccc;
	border-right: solid 1px #ccc;
	width: 56.56px; height: 56.56px; /* (sqrt(2)/) * 80 */
	transform: scaleX(0.6) translateY(-50%) rotate(45deg); /* create a rhombus */
	background: linear-gradient(-45deg, #f6f6f6, #e1e1e1 43%, #f1f1f1 63%, white);
	content: ''
	}
	<!-- content to be placed inside <body>…</body> -->
	<div class='shape'></div>