Create a Speech Bubble DIV with CSS

Create a popup that looks like a speech bubble.

Create a bubble like this:

Downloading data...

This code creates this simple bubble.

<!DOCTYPE html>
<html>
<head>
	<title>bubble</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #fff;
		}
		#bubble {
			position: relative; /* this can be absolute or fixed if need be */
			background-color: #fff;
			border: 1px solid #ccc;
			border-radius: 5px;
			width: 150px;
			padding: 15px;
			z-index: 10;
		}
			#bubble::before {
				content: "";
				position: absolute;
				border-style: solid;
				border-color: #ccc transparent transparent transparent;
				border-width: 10px 15px 0 1px;
				left: 15px;
				bottom: -10px;
			}
			#bubble::after {
				content: "";
				position: absolute;
				border-style: solid;
				border-color: #fff transparent transparent transparent;
				border-width: 9px 14px 0 0;
				left: 16px;
				bottom: -9px;
			}
	</style>
</head>
<body>
	<div id="bubble">Downloading data...</div>
</body>
</html>

If wanting to add box-shadow then remove the #bubble div:after {} section at the same time because there is no way to add a shadow that follows all the lines (unless a hard-edged shadow is acceptable), and this will make the arrow look as though it is in the shadow of the box. For example:

Downloading data...

Use JavaScript offsetHeight to determine the bubble's height in order to position it properly. For this to work display can not be set to none.

var bubble = document.getElementById("bubble");
var height = bubble.offsetHeight;
Feedback
close