html - How to create chat bubbles like facebook Messenger

Question

How would I create chat bubbles like this. More specifically how to group two ore more consecutive messages by one type of user into a bubble as a whole. For example FOR THE SENDER - the first message has right bottom border a 0, the messages in between have right top,bottom as 0 border radius and the last one has top right 0 border radius . Do I have to use javascript or can it be done using css.

HTML structure ca be

<ul>
 <li class="him">By Other User</li>
 <li class="me">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me">By this User, fourth message</li>
</ul>

What kind of css class/styles should i be using?

Answer 1

This is a rather basic example but it should explain all of the fundamentals you require.

Most of the solution lies within + adjacent sibling selector. In this case, it's used to apply a different border radius to multiple messages in a row from the same person.

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
  display:inline-block;
  clear: both;
  padding: 20px;
  border-radius: 30px;
  margin-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
}

.him{
  background: #eee;
  float: left;
}

.me{
  float: right;
  background: #0084ff;
  color: #fff;
}

.him + .me{
  border-bottom-right-radius: 5px;
}

.me + .me{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.me:last-of-type {
  border-bottom-right-radius: 30px;
}

<ul>
 <li class="him">By Other User</li>
 <li class="me">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me">By this User, fourth message</li>
</ul>