Popup with Border

dabblet.css

/*
	Popup with Border
*/

.arrow_box {
	padding: 40px;
	width: 280px;
	height: 100px;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/*
	The code from cssarrowplease:
*/

.arrow_box {
	position: relative;
	background: #88b7d5;
	border: 4px solid #c2e1f5;
}


/* make way for the triangle */
.arrow_box:after, .arrow_box:before {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

/* the main triangle */
.arrow_box:after {
	border-top-color: #88b7d5;
	border-width: 30px;
	left: 50%;
	margin-left: -30px;
}


/* the border triangle behind the main triangle */
.arrow_box:before {
/*	border-top-color: #c2e1f5;
	border-width: 36px;
	left: 50%;
	margin-left: -36px;
*/
	margin-top: -19px;
	left: 50%;
	margin-left: -23px;
	width: 41px;
	height: 41px;
	background: #c2e1f5;
	transform: rotate(45deg);
	z-index: -1;
	box-shadow: 1px 1px 4px -0px rgba(0,0,0,0.3);
}

dabblet.html

<div class="arrow_box"></div>

settings.json

{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}