Fancy arrow

dabblet.css

/**
 * Fancy arrow
 */
body {
	background-color: #ebeced;
}
.arrow {
	border: 96px solid transparent;
	border-bottom: 0;
	border-top: 37px solid #d7d7d8;
	width: 0;
	height: 0;
	margin-top: 100px;
	position:relative;

}
.arrow:after:after {
	content: 'sdadsada';
}
.arrow:after {
	content: '';
	border: 99px solid transparent;
	border-bottom: 0;
	border-top: 38px solid #fff;
	position: absolute;
	display: block;
	bottom: -1px;
	left: -3px;
	margin-left: -95px;
	z-index: -1;
}
.arrow:before {
	content: '';
	color: transparent;
	position: absolute;
	bottom:37px;
	left: -62px;
	height: 12px;
	width: 125px;
	background-color: #d7d7d8;
	display: block;
	z-index:2;
	border: 1px solid #c4c4c5;
	border-bottom: 0;
}
.arrow span {
	display: block;
	position: absolute;
	width: 198px;
	height: 1px;
	background-color: #c4c4c5;
	bottom: 37px;
	left: -98px;
	z-index:1;
}

dabblet.html

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

settings.json

{"view":"split","prefixfree":"1","page":"css"}