Advanced Search

pure CSS speech bubbles

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

Expand | Embed | Plain Text

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.