Very Useful CSS3 Speech Bubble

Just to show the concept i decided to make a speech bubble with a little pointer out of only html and css3.

HTML:

 

<div class="bubble">
<div class="pointer">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="content">
<p>Hey do you like this bubble?</p>
</div>
</div>

CSS:

.bubble {
width:400px;
color:#efefef;
}
.bubble .pointer {
height:15px;
background:#393939;
}
.bubble .pointer div {
height:100%;
background:#ffffff;
}
.bubble .pointer .one {
width:50%;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius:15px;
float:left;
}
.bubble .pointer .two {
width:50%;
float:right;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius:15px;
}
.bubble .content {
padding:10px;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
background:#393939;
text-align:center;
}

Download:http://www.htmldrive.net/items/download/710

Be Sociable, Share!

Leave a comment