聊天室环聊式三角形

我正在编写一个相对简单的SignalR聊天，迄今为止已相当成功。不过，我想将其类似于环聊或其他热门聊天。我的问题是下面这些红色三角形。我看了几个sources试图复制这个，但我一直不成功。下面是它现在的样子（下图）。聊天室环聊式三角形

不幸的是，当我滚动或者我比适合于容器中添加了更多的消息，这并不工作。

我不以任何方式一个CSS专家，但我认为这与绝对定位来做。下面是我的一些代码和CSS。如果您想了解更多信息，请告诉我。我会很感激我能得到的任何帮助/想法，谢谢。

聊天消息再次，超级简单，由JS生成的HTML：

$('#' + 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; 
}

来源

2015-10-07 atschaal

请问您可以添加jsfiddle。 –

@Maddy - 这是一个完全公平的要求。一分钟... – atschaal

http://jsfiddle.net/oo3eemcp/2/ – atschaal

添加position: relative;这位家长的div message private-message pm-other

取代这个

$('#divMessage').append('<div style="padding:5px; position: relative;"><div class="message private-message pm-other"><span class=""></span><p>' + message + '</p>' + '<time>' + fromUserName + '<strong> · </strong>' + time + '</time></div></div>');

来源

2015-10-07 06:06:12

演示链接 - http://jsfiddle.net/oo3eemcp/3/ –

你摇滚！非常感谢！ – atschaal

聊天室环聊式三角形

回答

相关问题