message bubble

by Zhe Qian

HTML

<ul>
    <li>
        <div class='left-triangle'></div>
        <div class='message'>Hello World!</div>
    </li>
    <li class='floatRight'>
        <div class='right-triangle'></div>
        <div class='message'>Hello World！</div>
    </li>
    
    <li class="both-before-and-after">
        <div class='message'>Hello World！</div>
    </li>
</ul>

CSS

li {
	display: block;
	position: relative;
	padding-bottom: 50px;
	clear: both;
}

.floatRight {
    float: right;
}

.message {
	display: inline;
	border: 6px solid #666;
	border-radius: 10px;
	padding: .5em .8em .5em .5em;
	margin-left: -6px;
	margin-right: -7px;
}

.left-triangle {
	float: left;
	position: relative;
	border-top: 10px solid transparent;
	border-right: 20px solid #666;
	border-bottom: 10px solid #666;
	border-left: 20px solid transparent;
}

.left-triangle:after {
	content: "";
	position: absolute;
	top: -5px;
	border-top: 5px solid transparent;
	border-right: 10px solid #fff;
	border-bottom: 5px solid #fff;
	border-left: 10px solid transparent;
}

.right-triangle {
	float: right;
	position: relative;
	border-top: 10px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 10px solid #666;
	border-left: 20px solid #666;
}

.right-triangle:before {
	content: "";
	position: absolute;
	right: 0;
	top: -5px;
	border-top: 5px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 5px solid #fff;
	border-left: 10px solid #fff;
}

.both-before-and-after:before {
    content: "";
	position: absolute;
    left: -40px;
	border-top: 10px solid transparent;
	border-right: 20px solid #666;
	border-bottom: 10px solid #666;
	border-left: 20px solid transparent;
}

.both-before-and-after:after {
    content: "";
	position: absolute;
	left: -20px;
    top: 5px;
	border-top: 5px solid transparent;
	border-right: 10px solid #fff;
	border-bottom: 5px solid #fff;
	border-left: 10px solid transparent;
}