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/