pure CSS speech bubbles


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



Copy this code and paste it in your HTML
  1. http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/
  2.  
  3. /* Bubble with an isoceles triangle
  4. ------------------------------------------ */
  5.  
  6. .triangle-isosceles {
  7. position:relative;
  8. padding:15px;
  9. margin:1em 0 3em;
  10. color:#000;
  11. background:#f3961c;
  12.  
  13. /* css3 */
  14. -moz-border-radius:10px;
  15. -webkit-border-radius:10px;
  16. border-radius:10px;
  17. background:-moz-linear-gradient(top, #f9d835, #f3961c);
  18. background:linear-gradient(top, #f9d835, #f3961c);
  19. }
  20.  
  21. /* creates triangle */
  22. .triangle-isosceles:after {
  23. content:"\00a0";
  24. display:block; /* reduce the damage in FF3.0 */
  25. position:absolute;
  26. z-index:-1;
  27. bottom:-30px;
  28. left:50px;
  29. width:0;
  30. height:0;
  31. border-width:15px 15px;
  32. border-style:solid;
  33. border-color:#f3961c transparent transparent;
  34. }

URL: http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.