CSS 3: Speech Bubbles


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



Copy this code and paste it in your HTML
  1. /*
  2.   Speech Bubbles
  3.   Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTION
  4.   <div class="speech-bubble speech-bubble-top">Hi there</div>
  5. */
  6.  
  7. .speech-bubble {
  8. position: relative;
  9. background-color: #292929;
  10.  
  11. width: 200px;
  12. height: 150px;
  13. line-height: 150px; /* vertically center */
  14.  
  15. color: white;
  16. text-align: center;
  17. border-radius: 10px;
  18.  
  19. font-family: sans-serif;
  20. }
  21.  
  22. .speech-bubble:after {
  23. content: '';
  24. position: absolute;
  25.  
  26. width: 0;
  27. height: 0;
  28.  
  29. border: 15px solid;
  30. }
  31.  
  32. /* Position the Arrow */
  33.  
  34. .speech-bubble-top:after {
  35. border-bottom-color: #292929;
  36.  
  37. left: 50%;
  38. bottom: 100%;
  39. margin-left: -15px;
  40. }
  41. .speech-bubble-right:after {
  42. border-left-color: #292929;
  43.  
  44. left: 100%;
  45. top: 50%;
  46. margin-top: -15px;
  47. }
  48.  
  49. .speech-bubble-bottom:after {
  50. border-top-color: #292929;
  51.  
  52. top: 100%;
  53. left: 50%;
  54. margin-left: -15px;
  55. }
  56.  
  57. .speech-bubble-left:after {
  58. border-right-color: #292929;
  59.  
  60. top: 50%;
  61. right: 100%;
  62. margin-top: -15px;
  63. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.