I am coding a relatively simple SignalR Chat and have been pretty successful so far. However, I would like to create a style similar to Hangouts or other popular chats. My problem is these red triangles below. I looked through several sources , trying to reproduce this, but I was unsuccessful. Here's what it looks like now (below).
Unfortunately, this does not work when I scroll or add more messages than paste into a container.
I am not a CSS expert in any way, but I assume this is due to absolute positioning. Below is part of my code and css. Please let me know if you need more information. I will be grateful for any help / ideas I can get, thanks.
, , html js:
$('#' + ctrId).find('#divMessage').append('<div style="padding:5px;">' +
'<div class="message private-message pm-other">' +
'<p>' + message + '</p>' +
'<time>' + fromUserName + '<strong> · </strong>' + time + '</time>' +
'</div>' +
'</div>');
CSS, :
.private-message {
background: white;
padding: 10px;
border-radius: 2px;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
}
.private-message p {
font-size: 0.90em;
margin: 0 0 0.05em 0;
}
.private-message time {
font-size: 0.80em;
color: #ccc;
}
.private-message:before{
content: "";
position: absolute;
right: 95%;
width: 0;
height: 0;
border-top: 0px solid transparent;
border-right: 13px solid red;
border-bottom: 13px solid transparent;
}