body { font-family: "Helvetica Neue"; font-size: 20px; font-weight: normal;
}
section { max-width: 450px; margin: 50px auto;
}
section div { max-width: 255px; word-wrap: break-word; margin-bottom: 20px; line-height: 24px;
}
.clear { clear: both;
}
.from-me { position: relative; padding: 10px 20px; color: white; background: #0B93F6; border-radius: 25px; float: right;
}
.from-me:before { content: ""; position: absolute; z-index: -1; bottom: -2px; right: -7px; height: 20px; border-right: 20px solid #0B93F6; border-bottom-left-radius: 16px 14px; -webkit-transform: translate(0, -2px);
}
.from-me:after { content: ""; position: absolute; z-index: 1; bottom: -2px; right: -56px; width: 26px; height: 20px; background: white; border-bottom-left-radius: 10px; -webkit-transform: translate(-30px, -2px);
}
.from-them { position: relative; padding: 10px 20px; background: #E5E5EA; border-radius: 25px; color: black; float: left;
}
.from-them:before { content: ""; position: absolute; z-index: 2; bottom: -2px; left: -7px; height: 20px; border-left: 20px solid #E5E5EA; border-bottom-right-radius: 16px 14px; -webkit-transform: translate(0, -2px);
}
.from-them:after { content: ""; position: absolute; z-index: 3; bottom: -2px; left: 4px; width: 26px; height: 20px; background: white; border-bottom-right-radius: 10px; -webkit-transform: translate(-30px, -2px);
}

<section> <div class="from-me"> <p>Hey there! What's up?</p> </div> <div class="clear"></div> <div class="from-them"> <p>Checking out iOS7 you know..</p> </div> <div class="clear"></div> <div class="from-me"> <p>Check out this bubble!</p> </div> <div class="clear"></div> <div class="from-them"> <p>It's pretty cool!</p> </div> <div class="clear"></div> <div class="from-me"> <p>Yeah it's pure CSS & HTML</p> </div> <div class="clear"></div> <div class="from-them"> <p>Wow that's impressive. But what's even more impressive is that this bubble is really high.</p> </div> </section>