First Pen

index.html

<div class="bubble">
<div class="bubble_head"></div>
<p class="bubble_body">
Pure CSS speech or tooltip bubble with box-shadow and border-radius by ravi joon...
</p>
</div>

style.css

body { background:#8e7474; }
.bubble {
   width: 200px;
}

.bubble_head {
  z-index:80;
position: relative;
bottom: -22px;
left: 50%;
width: 40px;
height: 40px;
background: #fff;
-webkit-box-shadow:  -1px -1px 2px 0px #eee ;
        box-shadow:  -1px -1px 2px 0px #eee ;
margin-top: -11px;
   -webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */
      -moz-transform: rotate(45deg); /* FF3.5+ */
        -o-transform: rotate(45deg); /* Opera 10.5 */
        -ms-transform: rotate(7.5deg); /* IE9 */
        transform: rotate(45deg);
  /* CSS rotation for MSIE 8- – look at the HTML conditional comment */
}

.bubble_body {
	z-index:70;
position: relative;
width: 200px;
background: #fff;
color: #000;
padding: 20px;
margin: 0;
-webkit-box-shadow:  0px 2px 5px 0px #ddd ;
        box-shadow:  0px 2px 5px 0px #ddd ;
border-radius: 5px;
}