Curved arrow

dabblet.css

/* Curved arrow */

.curved-arrow{
	position: relative;
	left: 100px;
	top: 100px;
	width: 0;
	height: 0;
	border-right: 12px solid red;
	border-top: 12px solid transparent;
	transform: rotate(20deg);
}
.curved-arrow:after{
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border-right: 3px solid red;
	border-radius: 0 30px 0 0;
	left: -18px;
	top: -15px;
	transform: rotate(-45deg);
}
.reverse{
	top: 120px;
	transform: rotate(180deg);
}

dabblet.html

<div class='curved-arrow'></div>
<div class='curved-arrow reverse'></div>

settings.json

{"view":"separate","fontsize":"60","seethrough":"","prefixfree":"1","page":"all"}