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

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