Reply Bubble with triangle below

Question

It's hard for me to figure out how to make a CSS quotation bubble with a triangle in the lower left. I found a lot of CSS for speech bubbles, but either they do not expand with the text, or the triangle is not in the lower left corner (where I need it).

I found a speech bubble that I really like, but it's a triangle on the left side because it was encoded for chat. If someone could explain to me how to set up this code so that the bubble hits the lower left side, it would be very helpful!

.bubble{ background-color: #F2F2F2; border-radius: 5px; box-shadow: 0 0 6px #B2B2B2; display: inline-block; padding: 10px 18px; position: relative; vertical-align: top; float: left; margin: 5px 45px 5px 20px; } .bubble::before { background-color: #F2F2F2; content: "\00a0"; display: block; height: 16px; position: absolute; top: 11px; transform: rotate( 29deg ) skew( -35deg ); -moz-transform: rotate( 29deg ) skew( -35deg ); -ms-transform: rotate( 29deg ) skew( -35deg ); -o-transform: rotate( 29deg ) skew( -35deg ); -webkit-transform: rotate( 29deg ) skew( -35deg ); width: 20px; box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 ); left: -9px; } 

Here it works in jsfiddle: http://jsfiddle.net/24S5L/2/

Thanks in advance for any help you can offer!

Answer 1

Getting the bottom arrows is pretty simple, use bottom instead of top and only some settings in rotate and skew

CSS

 .chat { width: 400px; } .bubble { background-color: #F2F2F2; border-radius: 5px; box-shadow: 0 0 6px #B2B2B2; display: inline-block; padding: 10px 18px; position: relative; vertical-align: top; margin: 20px 10px; } .bubble::before { background-color: #F2F2F2; content:"\00a0"; display: block; height: 16px; width: 16px; position: absolute; bottom: -7.5px; transform: rotate(47deg) skew(5deg); -moz-transform: rotate(47deg) skew(5deg); -ms-transform: rotate(47deg) skew(5deg); -o-transform: rotate(47deg) skew(5deg); -webkit-transform: rotate(47deg) skew(5deg); box-shadow: 2px 2px 2px 0 rgba(178, 178, 178, .4); } 

Demo

You can remove div.chat from HTML and CSS. There is no need.

Answer 2

Do you mean the bottom of the left or left of the bottom?

If you mean the bottom of the left side, just replace:

 top: 11px; 

with

 bottom: 11px; 

like this...

 .bubble::before { background-color: #F2F2F2; content: "\00a0"; display: block; height: 16px; position: absolute; bottom: 11px; transform: rotate( 29deg ) skew( -35deg ); -moz-transform: rotate( 29deg ) skew( -35deg ); -ms-transform: rotate( 29deg ) skew( -35deg ); -o-transform: rotate( 29deg ) skew( -35deg ); -webkit-transform: rotate( 29deg ) skew( -35deg ); width: 20px; box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 ); left: -9px; } 

If you do not let me know, and I will have it at the bottom. Let me know how you deal!

Answer 3

JS FIDDLE - Is this what you wanted?

 .bubble{ background-color: #F2F2F2; border-radius: 5px; box-shadow: 0 0 6px #B2B2B2; display: inline-block; padding: 10px 18px; position: relative; vertical-align: top; float: left; margin: 5px 45px 5px 20px; } .bubble:before { background-color: #F2F2F2; bottom: -5px; box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.4); content: " "; display: block; height: 13px; left: 11px; position: absolute; transform: rotate(-68deg) skew(-35deg); width: 15px; } 

Answer 4

I think this does the trick. There is also the FIDDLE plug .

 .bubble{ position: relative; display: inline-block; float: left; clear: left; /* don't think you'll need this... it going to be absolute eventually I bet */ background-color: white; padding: 1em; box-shadow: 0px 0px 2px 2px rgba(0,0,0,.3); /* adjust howevers */ border-radius: .2em; /* for placement only */ margin-bottom: 2em; } .bubble:before { content: " "; position: absolute; display: block; background-color: white; height: 14px; /* you can do fancier stuff, but then the tringle digs into the box further... */ width: 14px; bottom: -7px; /* < or = to half the fake triangle width? */ left: 15px; box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3); /* adjust howevers */ -webkit-transform: rotate(45deg); transform: rotate(45deg); } 

Answer 5

• Simple floating CSS code box with rounded corners, a triangle and a shadow box:
  

I encountered this similar problem and after many disappointments, this is where I ended up.

See the script here: http://jsfiddle.net/erikthedeveloper/CASJY/

Essentially, I have a div.quote-box that contains p and two divs (.q-tip and .q-blocker).

I rotate the “tip” to create a triangle. Place it exactly in the center at the bottom of the quote box and “block” the top half of the tip with my .blocker div. This leaves a nice shadow around the quote box and clues.

HTML

  <div class="quote-box"> <p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, deleniti fugit quo tempora cupiditate in! Esse, consectetur adipisicing elit. Impedit, deleniti fugit quo tempora cupiditate in! Esse, excepturi..." </p> <!--[if gte IE 10]> --> <div class='q-tip q-rotate q-shadow'></div> <div class="q-blocker"></div> <!-- <![endif]--> </div> </div> 

CSS

 .quote-box{ position: relative; width:100%; height: 150px; background-color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } .quote-box p{ width: 90%; margin: 1.5em auto; font-size: 0.85em; font-style: italic; line-height: 1.75em; color: #636363; max-height: 200px; overflow: hidden; padding-top: 10px; } .quote-box-tip{ font-size: 2em; position: relative; height: 1em; width: 0; left:45%; bottom:.5em; } .q-shadow, .quote-box{ -moz-box-shadow: 1px 1px 2px 0 #000; -webkit-box-shadow: 2px 2px 2px 0 #000; box-shadow: 1px 1px 2px 0 #000; } .q-tip{ height:20px; width:20px; background-color:#fff; position:absolute; bottom:-10px; left:0; right: 0; margin: auto; z-index:1; } .q-blocker{ width:80%; height:20px; background-color:#fff; position:absolute; bottom:0; z-index:2; left: 0; right: 0; margin: auto; } .q-rotate{ /* Not working in IE8 and lower */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5); } 

I hope this helps!