title: how to style chat-bubble in iphone classic style using css only
body: <p>I trying to create a html page which looks like similar to Messages(thread view) just as in our android and iphone devices.</p>
  
  <p>Here is what i have coded</p>
  
  <p>Css styles:</p>
  
  <pre><code>&lt;style type='text/css'&gt;
  .triangle-right 
   {  
          position:relative;   
          padding:15px;   
          color:#fff;   
          background:#075698;   
          background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));   background:-moz-linear-gradient(#2e88c4, #075698);   
          background:-o-linear-gradient(#2e88c4, #075698);   
          background:linear-gradient(#2e88c4, #075698);   
          -webkit-border-radius:10px;   
          -moz-border-radius:10px;   
          border-radius:10px;   
   }   
   .triangle-right.top   
   {     
      background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));   
      background:-moz-linear-gradient(#075698, #2e88c4);   
      background:-o-linear-gradient(#075698, #2e88c4);   
      background:linear-gradient(#075698, #2e88c4);   
   }   
   .triangle-right.left   
       {   
              margin-left:10px;background:#075698;   
       }   
       .triangle-right.right   
       {   
          margin-right:10px;  background:#075698;   
       }   
       .triangle-right:after    
       {   
       content:'';   
           position:absolute;   
           bottom:-20px;left:50px;border-width:20px 0 0 20px;border-style:solid;border-color:#075698 transparent; display:block;width:0;   
       }   
       .triangle-right.top:after    
       {   
          top:-20px;right:50px;bottom:auto;left:auto;border-width:20px 20px 0 0;border-color:transparent #075698;    
       }   
   .triangle-right.left:after    
       {   
          top:16px;left:-15px;    bottom:auto;border-width:0 15px 15px 0;border-color:transparent #E8E177;   
       }   
       .triangle-right.right:after   
       {   
          top:16px;right:-15px;bottom:auto;left:auto;border-width:0 0 15px 15px; border-color:transparent #8EC3E2 ;   
   }  
  .triangle 
  {
  width: 0;
  height: 0;
      border-left: 50px solid transparent;
      border-right: 100px solid transparent;
      border-bottom: 50px solid #fc2e5a;
  }
  </code></pre>
  
  <p> </p>
  
  <p>I tried changing some values in</p>
  
  <pre><code>     .triangle-right.left:after    
       {   
          top:16px;left:-15px;    bottom:auto;border-width:0 15px 15px 0;border-color:transparent #E8E177;   
       }   
       .triangle-right.right:after   
       {   
          top:16px;right:-15px;bottom:auto;left:auto;border-width:0 0 15px 15px; border-color:transparent #8EC3E2 ;   
   } 
  </code></pre>
  
  <p>but not getting the exact shapes as desired.
  I need to construct the bubble in the following fashion</p>
  
  <p><img src="https://i.stack.imgur.com/sw1jS.png" width="250" /></p>
  
  <p>Can anyone help me</p>