popup__tail

dabblet.css

/**
 * popup__tail
 */

body {
	background: #FFE8AA;
}

.popup {
	width: 200px;
	height: 80px;
	line-height: 80px;
	text-align: center;
	margin: 100px auto 0;
	background: transparent 3px 3px no-repeat;
	background-image: -webkit-linear-gradient(#fff, #fff);
	background-image:    -moz-linear-gradient(#fff, #fff);
	/* ... */
    background-image:         linear-gradient(#fff, #fff);
	background-size: 194px 74px;
	box-shadow:
		inset 0 0 0 3px rgba(0, 0, 0, 0.1),
		0 8px 25px -5px rgba(0, 0, 0, 0.25);
	position: relative;
}

.popup:before, .popup:after {
	content: '';
	position: absolute;
	border: 20px solid transparent;
	border-top: 0;
	left: 80px;
}

.popup:before {
	border-bottom-color: rgba(0, 0, 0, 0.1);
	bottom: 100%;
}

.popup:after {
	border-bottom-color: #fff;
	top: -15.8px; /* Треугольники равносторонние => Бордер - катет, Смещение - гипотенуза. */
}

dabblet.html

<div class="popup">...</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}