如何创建这样的聊天气泡。更具体地说,如何将一种类型的用户将两个或多个连续消息分组为整个泡泡。例如FOR THE SENDER - 第一条消息的右下边框为0,其间的消息右上角,下边距为0边框半径,最后一条消息右上角为0边框半径。我是否必须使用javascript或者可以使用css完成。
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结构可以
<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类/款式?
What kind of css class/styles should i be using?
推荐答案这是一个相当基本的例子,但它应该解释你需要的所有基本原理。
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>
更多推荐
如何创建Facebook Messenger等聊天气泡
发布评论