how to style chat-bubble in iphone classic style using css only

Question

I trying to create a html page which looks like similar to Messages(thread view) just as in our android and iphone devices.

Here is what i have coded

Css styles:

<style type='text/css'>
.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;
}

I tried changing some values in

     .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 ;   
 } 

but not getting the exact shapes as desired. I need to construct the bubble in the following fashion

Can anyone help me

Answer 1

The HTML

<div class="chat">
  <div class="yours messages">
    <div class="message last">
      Hello, how's it going?
    </div>
  </div>
  <div class="mine messages">
    <div class="message">
      Great thanks!
    </div> 
    <div class="message last">
      How about you?
     </div>
  </div>
</div>

The CSS

body {
  font-family: helvetica;
  display: flex ;
  flex-direction: column;
  align-items: center;
}

.chat {
  width: 300px;
  border: solid 1px #EEE;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.messages {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}

.message {
  border-radius: 20px;
  padding: 8px 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
}

.yours {
  align-items: flex-start;
}

.yours .message {
  margin-right: 25%;
  background-color: #EEE;
  position: relative;
}

.yours .message.last:before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: -7px;
  height: 20px;
  width: 20px;
  background: #EEE;
  border-bottom-right-radius: 15px;
}
.yours .message.last:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: -10px;
  width: 10px;
  height: 20px;
  background: white;
  border-bottom-right-radius: 10px;
}

.mine {
  align-items: flex-end;
}

.mine .message {
  color: white;
  margin-left: 25%;
  background: rgb(0, 120, 254);
  position: relative;
}

.mine .message.last:before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: -8px;
  height: 20px;
  width: 20px;
  background: rgb(0, 120, 254);
  border-bottom-left-radius: 15px;
}

.mine .message.last:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: -10px;
  width: 10px;
  height: 20px;
  background: white;
  border-bottom-left-radius: 10px;
}

https://codepen.io/swards/pen/gxQmbj

Answer 2

I know this answer is old, but for anyone looking for new iOS iMessage style check this.

body {
  font-family: "Helvetica Neue";
  font-size: 20px;
  font-weight: normal;
}

section {
  max-width: 450px;
  margin: 50px auto;
}
section div {
  max-width: 255px;
  word-wrap: break-word;
  margin-bottom: 20px;
  line-height: 24px;
}

.clear {
  clear: both;
}

.from-me {
  position: relative;
  padding: 10px 20px;
  color: white;
  background: #0B93F6;
  border-radius: 25px;
  float: right;
}
.from-me:before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -2px;
  right: -7px;
  height: 20px;
  border-right: 20px solid #0B93F6;
  border-bottom-left-radius: 16px 14px;
  -webkit-transform: translate(0, -2px);
}
.from-me:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -2px;
  right: -56px;
  width: 26px;
  height: 20px;
  background: white;
  border-bottom-left-radius: 10px;
  -webkit-transform: translate(-30px, -2px);
}

.from-them {
  position: relative;
  padding: 10px 20px;
  background: #E5E5EA;
  border-radius: 25px;
  color: black;
  float: left;
}
.from-them:before {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: -2px;
  left: -7px;
  height: 20px;
  border-left: 20px solid #E5E5EA;
  border-bottom-right-radius: 16px 14px;
  -webkit-transform: translate(0, -2px);
}
.from-them:after {
  content: "";
  position: absolute;
  z-index: 3;
  bottom: -2px;
  left: 4px;
  width: 26px;
  height: 20px;
  background: white;
  border-bottom-right-radius: 10px;
  -webkit-transform: translate(-30px, -2px);
}

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

Source

Answer 3

Here is a simple pure css3 solution for creating chat bubble quite similar to iOS. I would go with this cleaner look... This is not using any image and its responsive for different device sizes. Here is the Working code. Came across this website and improvised css little bit to create pointer without image....

HTML

<div class="commentArea">
<div class="bubbledRight">
    Error dicunt theophrastus cu qui. Ad eos simul possit option, adipisci principes sed at. Detracto adolescens pro ea, duo no
</div>
<div class="bubbledLeft">
    Lorem ipsum dolor sit amet, ea oblique constituam signiferumque eam. Pri adipisci maluisset te.
</div>

CSS

.commentArea {
font: 14px Arial;
padding: 0 10px;
margin-top: 20px;    
}

.bubbledLeft,.bubbledRight {
    margin-top: 20px;
    padding: 5px 9px;
    max-width: 50%;
    clear: both;
    position: relative;
}

.bubbledLeft{
    float: left;
    margin-right: auto;
    -webkit-border-radius: 8px 8px 8px 0px;
    -moz-border-radius: 8px 8px 8px 0px;
    -o-border-radius: 8px 8px 8px 0px;
    -ms-border-radius: 8px 8px 8px 0px;
    border-radius: 8px 8px 8px 0px;
    background-color: #65B045;
    color: #ffffff;
}

.bubbledLeft:before {
    border-bottom: 10px solid #65B045;
    border-left: 9px solid rgba(0, 0, 0, 0);
    position: absolute;
    bottom: 0;
    left: -8px;
    content: "";
}

.bubbledRight{
    float: right;
    margin-left: auto;
    text-align: right;
    -webkit-border-radius: 8px 8px 0px 8px;
    -moz-border-radius: 8px 8px 0px 8px;
    -o-border-radius: 8px 8px 0px 8px;
    -ms-border-radius: 8px 8px 0px 8px;
    border-radius: 8px 8px 0px 8px;
    background-color: #07D;
    color: white;
}

.bubbledRight:before {
    border-bottom: 9px solid #07D;
    border-right: 9px solid rgba(0, 0, 0, 0);
    position: absolute;
    bottom: 0;
    right: -8px;
    content: "";
}

Answer 4

Try this code For Thread view Messages.

   <div class="messages scroll">
           <div class="item blue">
              <div class="arrow"></div>
              <div class="text">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut diam quis dolor mollis tristique. Suspendisse vestibulum convallis felis vitae facilisis. Praesent eu nisi vestibulum erat.
                </div>
                <div class="date">09.02.2013, 21:04</div>
            </div>
        <div>

Css Styles

/* messages */

.body .content .block .messages{position: relative;}
.body .content .block .messages .item{width: 90%; padding: 5px; position: relative; margin: 10px 0px 0px; float: left;}
.body .content .block .messages .item.out{float: right; margin: 10px 0px 10px;}
.body .content .block .messages .item .arrow{border-color: transparent transparent #009AD7 #009AD7; border-style: solid; border-width: 5px;width: 0px; height: 0px; position:absolute; left: 10px; top: -10px;}
.body .content .block .messages .item.out .arrow{left: auto; top: auto; right: 10px; bottom: -10px; border-color: #005683 #005683 transparent transparent;}
.body .content .block .messages .item .text{font-size: 12px; color: #FFF; line-height: 13px;}
.body .content .block .messages .item .date{font-size: 12px; color: #FFF; text-align: right; opacity: 0.6; filter: alpha(opacity=60); line-height: 13px;}

/* eof messages */

Thanks,

Kamalakannan.M