聊天室環聊式三角形

我正在編寫一個相對簡單的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

聊天室環聊式三角形

回答

相關問題