CSS text balloon using variables, calc and transform

dabblet.css

/* CSS text balloon using variables, calc and transform */

@import url(http://fonts.googleapis.com/css?family=Chewy);

div {
	--balloon-color: #FFF;
	--balloon-border: 3px;
	position: relative;
	top: 1em;
	left: 1em;
	display: inline-block;
	background-color: var(--balloon-color);
	box-sizing: border-box;
	padding: 1.2em 2.5ch;
	text-align: center;
	font-family: "Chewy", cursive;
	font-size: 120%;
	color: #000;
	border: var(--balloon-border) solid;
	border-radius: 10px;
}
div::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 70%;
	--tip-size: 20px;
	width: var(--tip-size);
	height: var(--tip-size);
	background: var(--balloon-color);
	transform: rotate(45deg) translateY(calc(var(--tip-size) * -0.707));
	border-bottom: var(--balloon-border) solid;
	border-right: var(--balloon-border) solid;
}

dabblet.html

<div>Oi! Tudo bem?</div>

dabblet.js

// alert('Hello world!');

settings.json

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