title: Chat box hangout-like triangles
body: <p>I am coding a relatively simple SignalR Chat and it has been pretty successful so far.  However, I'd like to style it similar to Hangouts or other popular chats. My problem is these red triangles below.  I've looked at several <a href="https://css-tricks.com/replicating-google-hangouts-chat/" rel="nofollow noreferrer">sources</a> trying to replicate this, but I've been unsuccessful.  Here's what it looks like now (below).</p>
  
  <p><a href="https://i.stack.imgur.com/8T5kqm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8T5kqm.png" alt="Chat I&#39;d like"></a></p>
  
  <p>Unfortunately, this does not work when I'm scrolling or I've added more message than fit in the container.</p>
  
  <p><a href="https://i.stack.imgur.com/DYLIdm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DYLIdm.png" alt="Chat Issues"></a></p>
  
  <p>I'm not a CSS expert by any means, but I assume this has to do with the absolute positioning.  Below is some of my code and css.  Please let me know if you'd like more info.  I'd appreciate any help/ideas I can get, thank you.</p>
  
  <p>The chat messages are again, super simple, and the html is generated by js:</p>
  
  <pre><code>$('#' + ctrId).find('#divMessage').append('&lt;div style="padding:5px;"&gt;' +
      '&lt;div class="message private-message pm-other"&gt;' + 
          '&lt;p&gt;' + message + '&lt;/p&gt;' + 
          '&lt;time&gt;' + fromUserName + '&lt;strong&gt; · &lt;/strong&gt;' + time + '&lt;/time&gt;' + 
      '&lt;/div&gt;' +
  '&lt;/div&gt;');
  </code></pre>
  
  <p>Here is the CSS to go along with that:</p>
  
  <pre><code>.private-message {
      background: white;
      padding: 10px;
      border-radius: 2px;
      -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
      box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
  }
  .private-message p {
      font-size: 0.90em;
      margin: 0 0 0.05em 0;
  }
  .private-message time {
      font-size: 0.80em;
      color: #ccc;
  }
  .private-message:before{
      content: "";
      position: absolute;
      right: 95%;
      width: 0;
      height: 0;
      border-top: 0px solid transparent;
      border-right: 13px solid red;
      border-bottom: 13px solid transparent;
  }
  </code></pre>