使用JS HTML DOM創建聊天氣球

Question

我即將創建一個聊天氣球，當用戶在頁面上時會彈出一個聊天氣球。
我的「氣球」現在看起來不像聊天氣球。

它應該是這樣的： Chat Balloon

我不知道如何使與HTML DOM的氣球下的那個東西。

我怎麼能用JS HTML DOM做到這一點？

我已經得到了這個：

this.div = document.createElement('div'); 
 
// set style of div 
 
this.div.style.width = '120px'; 
 
this.div.style.height = '46px'; 
 
this.div.style.bottom = '30%'; 
 
this.div.style.zIndex = '9999999'; 
 
this.div.style.display = 'block'; 
 
this.div.style.position = 'fixed'; 
 
this.div.style.bottom = '12%'; 
 
this.div.style.paddingTop = '8px'; 
 
this.div.style.color = 'black'; 
 
this.div.style.right = '1%'; 
 
this.div.style.backgroundColor = 'rgba(211, 211, 211, 1)'; 
 
this.div.style.borderWidth = '1px'; 
 
this.div.style.borderStyle = 'solid'; 
 
this.div.style.textAlign = 'center'; 
 
this.div.style.borderRadius = "6px"; 
 
this.div.style.borderColor = 'lightgray'; 
 
this.div.setAttribute("id", "help"); 
 
document.body.appendChild(this.div); 
 
document.getElementById("help").innerHTML = "Kan ik u helpen?";

可能有人給我如何做到這一點還是爲我做這些信息？
我更喜歡編輯我的代碼段。
你也可以給我一些例子。

Answer 1

下面是一個例子，就像您排列的圖像。您可以查看這裏工作演示：https://jsfiddle.net/BradChelly/oL5bc1j4/

HTML：

<div class="bubble">CSS Speech Bubble</div> 

CSS：

.bubble 
{ 
position: relative; 
width: 250px; 
height: 120px; 
padding: 0px; 
background: #FFFFFF; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
border: #7F7F7F solid 5px; 
} 

.bubble:after 
{ 
content: ''; 
position: absolute; 
border-style: solid; 
border-width: 26px 15px 0; 
border-color: #FFFFFF transparent; 
display: block; 
width: 0; 
z-index: 1; 
bottom: -26px; 
left: 35px; 
} 

.bubble:before 
{ 
content: ''; 
position: absolute; 
border-style: solid; 
border-width: 30px 19px 0; 
border-color: #7F7F7F transparent; 
display: block; 
width: 0; 
z-index: 0; 
bottom: -35px; 
left: 31px; 
} 

https://jsfiddle.net/BradChelly/oL5bc1j4/