Design chat textbox with rounded border - css

Question

I have to create the chat application textbox as a below attached image, I have tried but I cannot create the textbox as it was there presented.
.leftpanel-messages {
background-color: #FFFFFF;
padding: 5px 5px 0px 5px;
float: left;
}
.leftpanel-messages ul {
list-style: none;
margin: 0;
padding: 0;
}
.leftpanel-messages ul li {
display:inline-block;
clear: both;
padding: 5px 15px 5px 10px;
border-radius: 10px;
border-bottom-right-radius: 0;
margin-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
position: relative;
}
.him {
background: transparent;
border:1px solid #eee;
float: left;
}
.him > p {
font-size: 13px;
margin: 0 0 0.2rem 0;
}
.me {
float: right;
background: #0084ff;
color: #fff;
}
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 leftpanel-messages">
<div class="" style="padding:15px 10px 0 10px;">
<ul>
<li class="him">
<p>Text message send by him</p>
<div></div>
</li>
</ul>
</div>
</div>
Can anyone help me to append the right corner at the end of the textbox?

Answer 1

Using :before and :after
.leftpanel-messages {
background-color: #FFFFFF;
padding: 5px 5px 0px 5px;
float: left;
}
.leftpanel-messages ul {
list-style: none;
margin: 0;
padding: 0;
}
.leftpanel-messages ul li {
display:inline-block;
clear: both;
padding: 5px 15px 5px 10px;
border-radius: 10px;
border-bottom-right-radius: 0;
margin-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
position: relative;
}
.him {
background: transparent;
border:1px solid #eee;
float: left;
position: relative;
}
.him > p {
font-size: 13px;
margin: 0 0 0.2rem 0;
}
.me {
float: right;
background: #0084ff;
color: #fff;
}
.him:before {
width: 0;
height: 0;
border-style: solid;
border-width: 13px 0 0 13px;
border-color: transparent transparent transparent #eee;
position: absolute;
content: '';
bottom: -1px;
right: -12px;
transform: scale(0.7, 1);
}
.him:after {
width: 0;
height: 0;
border-style: solid;
border-width: 12px 0 0 12px;
border-color: transparent transparent transparent #ffffff;
position: absolute;
content: '';
bottom: 0;
right: -10px;
transform: scale(0.7, 1);
}
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 leftpanel-messages">
<div class="" style="padding:15px 10px 0 10px;">
<ul>
<li class="him">
<p>Text message send by him</p>
<div></div>
</li>
</ul>
</div>
</div>
Or you can just use only one pseudo-element :before with background-image with a little triangle.