css3用右箭頭和邊框圓角聊天氣泡

Question

我很努力地用聊天氣泡創建聊天窗格。

我的HTML結構：

<div id="container"> 
    <div class="bubble"> 

看一看這裏一個例子：

fiddle example here

我的問題是，我有點不明白如何把第二個引號「箭頭' 在右邊。

另外，如何添加邊框，以便它可以包含「箭頭」？

在此先感謝。

Answer 1

添加這些

<div class="arrowright"></div> 


    .arrowright 
    { 
    background: #2C2C2C; 
    font-size: 12px; 
    position: relative; 
    width: 1em; 
    height: 1em; 
    margin-left: -0.7em; 
    } 

    .arrowright::before { 
    bottom: -0.666em; 
    left: 0.8em; 
    position: absolute; 
    border-left: 1.2em solid #2C2C2C; 
    border-top: 1.2em solid rgba(44, 44, 44, 0); 
    border-bottom: 1.2em solid rgba(44, 44, 44, 0); 
    content: ""; 
    }