title: how to show like chat box for the div/p tag top left/right corners
body: <p>we are developing <strong>chat application</strong> in that application we are showing text in div but i want to give css like <strong>chat box direction</strong> for that <strong>div(top right/left border)</strong>  like below screen shot.</p>
  
  <p>i marked in red color in the screen shot what exactly i need to do</p>
  
  <p><strong>requirement screen shot</strong><br>
  <img src="https://i.stack.imgur.com/snySb.png"/>    </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.right {
    position: relative;
    background: white;
    text-align: right;
    padding: 10px 15px;
    border-radius: 6px;
    border: 1px solid #ccc;
    float: right;
    right: 20px;
  }
  
  .right::before {
    content: '';
    position: absolute;
    visibility: visible;
    top: -1px;
    right: -10px;
    border: 10px solid transparent;
    border-top: 10px solid #ccc;
  }
  
  .right::after {
    content: '';
    position: absolute;
    visibility: visible;
    top: 0px;
    right: -8px;
    border: 10px solid transparent;
    border-top: 10px solid white;
    clear: both;
    
  }
  
  div{
    clear: right;
  }
  
  .right img {
   display: block;
   height: auto;
   max-width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="right"&gt;
    &lt;span&gt;thanks&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="right"&gt;
    &lt;p style="margin-top: 0px;margin-bottom: 0px;color:green;font-size: 11px;"&gt;Kranti&lt;/p&gt;
    &lt;span&gt;thanks&lt;/span&gt;
     &lt;p style="float: left;margin-bottom: 0px;color:red;font-size: 11px;"&gt;2:33 PM&lt;/p&gt;
  &lt;/div&gt;
  
  
  
  &lt;div class="right"&gt;
    &lt;span&gt;thanks&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>how to give Give name ,time and message in the chat box.
  like below screen shot i want</p>
  
  <p><a href="https://i.stack.imgur.com/Z7MHI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z7MHI.png" alt="enter image description here"></a></p>