CSS3 Bubble speech

dabblet.css

/**
 * CSS3 Bubble speech
 */
p.speech
{
	position: relative;
	width: 200px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: #fff;
	border: 8px solid #666;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 2px 2px 4px #888;
	-moz-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
}

p.speech:before
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
	top: 100px;
	border: solid;
	border-width: 25px 25px 25px 25px;
	border-color: #666 transparent transparent #666;
}


p.speech:after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 38px;
	top: 100px;
	border: solid;
	border-width: 15px;
	border-color: #fff transparent transparent #fff;
}

#square:after {
content: '';
position: absolute;
width: 0;
height: 0;
top: 100px;
left: 30px;

border: 10px solid;
border-color: black transparent transparent black;  
}

dabblet.html

<div id="square">d</div>

<p class="speech">SitePoint Rocks!</p>  

settings.json

{"view":"split-vertical","prefixfree":"","page":"css"}