Very Useful CSS3 Speech Bubble

Home TooltipsVery Useful CSS3 Speech Bubble

Very Useful CSS3 Speech Bubble

14 years ago Views

9606

1916

sublimeorange

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;
}

Tag: tooltips