If you need assistance with creating text bubbles, I recommend checking out this helpful article:
To style the beginning and ending bubbles, utilize JQuery to target and modify their CSS properties within their parent container. In order to display sent images, consider wrapping them in a list item (li) and using float right or absolute positioning inside a relative element.
<ul class="ulContainer">
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ul>
Css:
.ulContainer li {
width:200px;
height:20px;
background-color:#9abff9;
list-style-type:none;
margin:10px 0 10px 0;
padding: 3px 3px 3px 5px;
border-radius: 10px 2px 2px 10px;
}
Here is the script to style the first and last list items:
$('.ulContainer li:first').css('border-top-right-radius','10px');
$('.ulContainer li:last').css('border-bottom-right-radius','10px');
Check out the JSFiddle example here: https://jsfiddle.net/s60dgfw2/
Update based on your feedback:
For achieving your desired outcome without JQuery, it may require complex selectors that are easier to implement using JQuery. Another option involves adding multiple CSS classes to lists as explained in this response by LGSon.
Alternatively, you can view this example below:
https://jsfiddle.net/5dcto0td/
.fancyContainer{
border: 1px solid #555;
position:relative;
width:300px;
padding:5px;
overflow:hidden;
}
.chatBox {
width: 300px;
list-style: none;
margin: 0 0 0 -40px;
position:0;
}
.chatBox li {
margin: 5px 0 5px 0;
padding: 3px 5px 3px 5px;
}
/*Set up initial chat element for .me*/
.chatBox .me {
min-height: 20px;
float:right;
clear: both;
background-color: #34a1ef;
border-radius: 10px 2px 2px 10px;
}
/*Set up initial chat element for .him*/
.chatBox .him {
min-height: 20px;
float:left;
clear: both;
background-color: #ddd;
border-radius: 2px 10px 10px 2px;
}
/*Set up grouped radius*/
.him + .me {
border-top-right-radius:10px;
}
.me + .him {
border-top-left-radius:10px;
}
.me + .me {
border-bottom-right-radius:2px;
}
.him + .him {
border-bottom-left-radius:2px;
}
/*Set up First and Last radius for .me*/
.chatBox > .me:first-child {
border-top-right-radius:10px;
}
.chatBox > .me:last-child{
border-bottom-right-radius:10px;
}
/*Set up First and Last radius for .him*/
.chatBox > .him:first-child{
border-top-left-radius:10px;
}
.chatBox > .him:last-child{
border-bottom-left-radius:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fancyContainer">
<ul class="chatBox">
<li class="him">Hello... This is a chatbox.</li>
<li class="me">Well well. I guess this is a chatbox.</li>
<li class="me">I'll have to talk about this some other time.</li>
<li class="me">No wait. I might change my mind</li>
<li class="him">Nonesense good sir! We'll have this talk right now and here.</li>
<li class="him">I Like...</li>
<li class="him">popsicles.</li>
<li class="me">I can't believe you've done this to me!</li>
</ul>
</div>