Advanced Search

CSS 3: Speech Bubbles

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

Expand | Embed | Plain Text

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.