Speech bubble effect with CSS


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



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.