iOS7-style chat balloons

index.html

<blockquote class="chat">
<p class="them">
Annie, I'm going to be a lil late for the rehearsal, tonight.
</p>
  
<p class="me">
S'Okay, Maude.  You know your lines...?
</p>

<p class="them">
I know em, I don't know what order they         come in...
</p>

<p class="me">
We'll work it out...
</p>
</blockquote>

iOS7-style chat balloons.markdown

iOS7-style chat balloons

iOS7/iMessage-style chat balloons in HTML/CSS with no extra elements.

Forked from Matt Powell's Pen iOS7-style chat balloons.

A Pen by Captain Anonymous on CodePen.

License.

style.css

@grey: #e5e5ea;
@blue: #1289fe;

body {
  background: white;
  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

blockquote {
  margin: 0 auto;
  max-width: 320px;
}

p {
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0.5em 1em;
  background: @grey;
  max-width: 75%;
  clear: both;
  position: relative;
  
  &.them {
    float: left;
    
    &::after {
      content: "";
      position: absolute;
      left: -0.5em;
      bottom: 0;
      width: 0.5em;
      height: 1em;
      border-right: 0.5em solid @grey;
      border-bottom-right-radius: 1em 0.5em;
    }
  }
  
  &.me {
    float: right;
    background-color: @blue;
    color: white;
   
    &::after {
      content: "";
      position: absolute;
      right: -0.5em;
      bottom: 0;
      width: 0.5em;
      height: 1em;
      border-left: 0.5em solid @blue;
      border-bottom-left-radius: 1em 0.5em;
    }
  }
}