styling of the container element
#demo {
   background-color: #333;
   height: 100px;
   position: relative; // important
   width: 100px;
}

// styling for the pointer
#demo:after {
   content: ' ';
   height: 0;
   position: absolute; // important
   width: 0;

   border: 10px solid transparent;
   border-top-color: #333; 

   // this bubble would appear bottom left
   top: 100%;
   left: 10px;   
}

Speech bubble effect with CSS

css

CSS