如何创建Facebook Messenger等聊天气泡

Question

我该如何创建这样的聊天气泡.更具体地说,如何将一种类型的用户将两个或多个连续消息分组为整个泡泡.例如FOR THE SENDER - 第一条消息的右下边框为0,其间的消息右上角,下边距为0边框半径,最后一条消息右上角为0边框半径.我是否必须使用javascript或者可以使用css完成.

HTML结构可以

<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>

我应该使用什么样的CSS类/样式？

Answer 1

这是一个相当基本的例子,但它应该解释你需要的所有基本原理.

大多数解决方案都位于+ 相邻的兄弟选择器中.在这种情况下,它用于将不同的边界半径应用于来自同一个人的一行中的多个消息.

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>