Speach Bubbles

Apply a class of .speech-bubble and .speech-bubble-DIRECTION

by Jennifer Perrin

HTML

<div class="speech-bubble speech-bubble-top">Hi there</div>
<br />
<div class="speech-bubble speech-bubble-right">Hi there</div>
<br />
<div class="speech-bubble speech-bubble-bottom">Hi there</div>
<br />
<div class="speech-bubble speech-bubble-left">Hi there</div>

CSS

body { margin:50px; }

.speech-bubble {
position: relative;
background-color: #d46a15;
 
width: 100px;
height: 75px;
line-height: 75px; /* vertically center */
 
color: white;
text-align: center;
border-radius: 10px;
font-family: sans-serif;
}
 
.speech-bubble:after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 15px solid;
}
 
/* Position the Arrow */
 
.speech-bubble-top:after {
border-bottom-color: #d46a15;
 
left: 50%;
bottom: 100%;
margin-left: -15px;
}
.speech-bubble-right:after {
border-left-color: #d46a15;
 
left: 100%;
top: 50%;
margin-top: -15px;
}
 
.speech-bubble-bottom:after {
border-top-color: #d46a15;
 
top: 100%;
left: 50%;
margin-left: -15px;
}
 
.speech-bubble-left:after {
border-right-color: #d46a15;
 
top: 50%;
right: 100%;
margin-top: -15px;
}