anami/dabblet.css

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */

/*background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;*/

html {
	font: 12pt "Monaco";
}

.arrow-container {
	position: relative;
}

.arrow {
	display: inline-block;
	margin: 10px;
}

.arrow:after, .arrow:before  {
	content: " ";
	width:0;
	height:0;
	border-color: transparent;
	border-style: solid;
}

.arrow.up:after {
	border-width: 40px;
	border-bottom-color: #f06;
	position: relative;
	top: -30px;
}

.arrow.down:after {
	border-width: 40px;
	border-top-color: #f06;
	position: relative;
	top: 40px;
}

.arrow.left:after {
	border-width: 40px;
	border-right-color: #f06;
	position: absolute;
	left: 200px;
	top: -20px;

}
.arrow.right:after {
	border-width: 40px;
	border-left-color: #f06;
	position: absolute;
	left: 300px;
	top: -20px;
}

.arrow.down.outline:before {
	border-width: 40px;
	border-top-color: #f06;
	position: relative;
	top: 61px;
	left: 100px;
}
.arrow.down.outline:after {
	border-width: 40px;
	border-top-color: white;
	position: relative;
	top: 50px;
	left: 20px;
}

.pink-line {
	display: block;
	border-bottom: solid 8px #f06;
	width: 500px;
	margin-top: 50px;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<p>
	Using the :after pseudo element - with 0 width and height. The "arrow" part is made up of the border.
</p>

<div class="arrow up"></div>

<p>
	This is achieved by setting the border to transparent but only setting the bottom border to pink.
</p>

<div class="arrow-container">
<div class="arrow down"></div>
<div class="arrow left"></div>
<div class="arrow right"></div>
</div>
<p>
	Now add a div with a bottom border of the same colour - the line can have a "trough"
</p>
<div class="arrow down outline"></div>
<div class="pink-line arrow down outline"></div>

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

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* The first commented line is your dabblet’s title
	*/

	/*background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;*/

	html {
	font: 12pt "Monaco";
	}

	.arrow-container {
	position: relative;
	}

	.arrow {
	display: inline-block;
	margin: 10px;
	}

	.arrow:after, .arrow:before {
	content: " ";
	width:0;
	height:0;
	border-color: transparent;
	border-style: solid;
	}

	.arrow.up:after {
	border-width: 40px;
	border-bottom-color: #f06;
	position: relative;
	top: -30px;
	}

	.arrow.down:after {
	border-width: 40px;
	border-top-color: #f06;
	position: relative;
	top: 40px;
	}

	.arrow.left:after {
	border-width: 40px;
	border-right-color: #f06;
	position: absolute;
	left: 200px;
	top: -20px;

	}
	.arrow.right:after {
	border-width: 40px;
	border-left-color: #f06;
	position: absolute;
	left: 300px;
	top: -20px;
	}

	.arrow.down.outline:before {
	border-width: 40px;
	border-top-color: #f06;
	position: relative;
	top: 61px;
	left: 100px;
	}
	.arrow.down.outline:after {
	border-width: 40px;
	border-top-color: white;
	position: relative;
	top: 50px;
	left: 20px;
	}

	.pink-line {
	display: block;
	border-bottom: solid 8px #f06;
	width: 500px;
	margin-top: 50px;
	}
	<!-- content to be placed inside <body>…</body> -->
	<p>
	Using the :after pseudo element - with 0 width and height. The "arrow" part is made up of the border.
	</p>

	<div class="arrow up"></div>

	<p>
	This is achieved by setting the border to transparent but only setting the bottom border to pink.
	</p>

	<div class="arrow-container">
	<div class="arrow down"></div>
	<div class="arrow left"></div>
	<div class="arrow right"></div>
	</div>
	<p>
	Now add a div with a bottom border of the same colour - the line can have a "trough"
	</p>
	<div class="arrow down outline"></div>
	<div class="pink-line arrow down outline"></div>