Skip to content

Instantly share code, notes, and snippets.

@charliepark

charliepark/curved_speech_bubble_tails.css

Created January 8, 2011 12:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save charliepark/770806 to your computer and use it in GitHub Desktop.
Save charliepark/770806 to your computer and use it in GitHub Desktop.
Download ZIP
Curved Speech Bubble Tails, Using Pure CSS
Raw
curved_speech_bubble_tails.css
/* the "dif" and "dif0" and "dif2" are just alternately-shaped examples, using translucent colors so you can see what's going on */
div.qanda p{background:#e3e3e3;border-radius:10px;-moz-border-radius:10px;font-size:13px;line-height:17px;margin-left:240px;padding:10px;position:relative}
div.qanda p:before{border-top:25px solid #e3e3e3;border-left:50px solid transparent;content:'';display:block;height:0;position:absolute;bottom:-25px;right:-5px;width:0px;z-index:1}
div.qanda p:after{background:#bbb;border-radius:0 0 0 25px;-moz-border-radius:0 0 0 25px;content:'';display:block;height:25px;position:absolute;bottom:-25px;right:-5px;width:25px;z-index:2}
div.qanda p.dif:before{border-top:25px solid rgba(255,0,255,0.5);border-left:50px solid transparent;content:'';display:block;height:0;position:absolute;bottom:-25px;right:-5px;width:0px;z-index:1}
div.qanda p.dif:after{background:rgba(0,255,255,0.5);border-radius:0 0 0 25px;-moz-border-radius:0 0 0 25px;content:'';display:block;height:25px;position:absolute;bottom:-25px;right:-5px;width:25px;z-index:2}
div.qanda p.dif2:before{border-top:25px solid rgba(255,0,255,0.5);border-left:45px solid transparent;content:'';display:block;height:0;position:absolute;bottom:-25px;right:0;width:0px;z-index:1}
div.qanda p.dif2:after{background:rgba(0,255,255,0.5);border-radius:0 0 0 25px;-moz-border-radius:0 0 0 25px;content:'';display:block;height:25px;position:absolute;bottom:-25px;right:0px;width:20px;z-index:2}
div.qanda p.dif0:before{border-top:25px solid rgba(255,0,255,0.5);border-left:55px solid transparent;content:'';display:block;height:0;position:absolute;bottom:-25px;right:-10px;width:0px;z-index:1}
div.qanda p.dif0:after{background:rgba(0,255,255,0.5);border-radius:0 0 0 25px;-moz-border-radius:0 0 0 25px;content:'';display:block;height:25px;position:absolute;bottom:-25px;right:-10px;width:30px;z-index:2}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment