Advanced Search

pure CSS speech bubbless

/ Published in: CSS
Save to your folder(s)
pure css3 speech bubbles

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* Bubble with an isoceles triangle ------------------------------------------ */
  2. .triangle-isosceles { position:relative; padding:15px; margin:1em 0 3em; color:#000; background:#f3961c;
  3. /* css3 */
  4. -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; background:-moz-linear-gradient(top, #f9d835, #f3961c); background:linear-gradient(top, #f9d835, #f3961c); } /* creates triangle */
  5. .triangle-isosceles:after { content:\"\\00a0\"; display:block;
  6. /* reduce the damage in FF3.0 */
  7. position:absolute; z-index:-1; bottom:-30px; left:50px; width:0; height:0; border-width:15px 15px; border-style:solid; border-color:#f3961c transparent transparent; }

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.