Advanced Search

Speech bubble effect with CSS

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. styling of the container element
  2. #demo {
  3.    background-color: #333;
  4.    height: 100px;
  5.    position: relative; // important
  6.    width: 100px;
  7. }
  8.  
  9. // styling for the pointer
  10. #demo:after {
  11.    content: ' ';
  12.    height: 0;
  13.    position: absolute; // important
  14.    width: 0;
  15.  
  16.    border: 10px solid transparent;
  17.    border-top-color: #333; 
  18.  
  19.    // this bubble would appear bottom left
  20.    top: 100%;
  21.    left: 10px;   
  22. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.