JS HTML DOMを使ってチャットバルーンを作成する

Question

ユーザーがページ上にいるときにチャットバルーンをポップアップさせようとしています。
私の "風船"は今やチャットバルーンのようには見えません。

それは次のようになります。私は、HTML DOMとバルーン下でその事を作る方法がわからない Chat Balloon

。

私は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/