CSS3 Speech Bubble

Creating CSS3 Speech Bubbles

Alright folks here is how to create a CSS3 Speech Bubble with a relatively small bit of CSS.



.speech_bubble:before {
	border-color: #7F7F7F transparent;
	border-style: solid;
	border-width: 20px 20px 0;
	content: "";
	display: block;
	left: 28px;
	position: absolute;
	top: 100%;
	width: 0;
	z-index: 0;
.speech_bubble {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 4px solid #7F7F7F;
	border-radius: 10px 10px 10px 10px;
	display: inline-block;
	padding: 10px;
	position: relative;
.speech_bubble:after {
	/*border-color: #FFFFFF transparent;*/
	border-top: 20px solid black;
	border-top-color: inherit;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-style: solid;
	border-width: 15px 15px 0;
	bottom: -15px;
	content: "";
	display: block;
	left: 33px;
	position: absolute;
	width: 0;
	z-index: 1;


Just add an element to the body of the page with the following class.


Of course you could use this as a base and take it further, adding a gradient background, some nice typography etc.

Also if your in a pinch and want to see the speech bubble adjust before your eyes, I’d recommend this great free online tool by John Clifford http://www.ilikepixels.co.uk/drop/bubbler/


Write a Comment