CSS Speech Bubble with Box Shadow

Question

Create a DIV that uses CSS to draw a triangle to the left. Attempts to apply a uniform box shadow to both the parent and the pseudo-element (see. Images) and code.

Is it possible? Or am I better off using border-image for this?

(Top: Before Shadow, Middle: CSS Box-Shadow, Bottom: Desired Result)

.bubble{ height: 200px; width: 275px; opacity: 0; margin-top: 41px; float: right; background-color: #F2F2F2; -webkit-border-radius: 5px; -webkit-box-shadow: 0px 0px 6px #B2B2B2; } .bubble::after { height: 0px; width: 0px; content: "\00a0"; display: block; margin-left: -10px; margin-top: 28px; border-width: 10px 10px 10px 0; border-style: solid; border-color: transparent #F2F2F2 transparent transparent; -webkit-box-shadow: 0px 0px 6px #B2B2B2; } 

Answer 1

Instead of using a triangle, you can just rotate the div with transform and get a real box-shadow . Since you only need the shadow on one side of the div (the visible side of the triangle), you must make the blur smaller and lower the opacity .

Demo: http://jsfiddle.net/ThinkingStiff/mek5Z/

HTML:

 <div class="bubble"></div> 

CSS

 .bubble{ background-color: #F2F2F2; border-radius: 5px; box-shadow: 0px 0px 6px #B2B2B2; height: 200px; margin: 20px; width: 275px; } .bubble::after { background-color: #F2F2F2; box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 ); content: "\00a0"; display: block; height: 20px; left: -10px; position: relative; top: 20px; transform: rotate( 45deg ); -moz-transform: rotate( 45deg ); -ms-transform: rotate( 45deg ); -o-transform: rotate( 45deg ); -webkit-transform: rotate( 45deg ); width: 20px; } 

Output:

Answer 2

Here is a complete working example in full (S) CSS, with variables for shadow width of nose size and optional border.

The trick is to get offsets and convert to the right to achieve pixel perfectness, and use overflow:hidden as needed to cut out the nose of your bubble (especially if you need borders).

The example in the answer above does not work for us, because the shadow is cropped and fits into the main area of ​​the bubbles.

IE7 / 8 degrades gracefully.

HTML:

 <div class="chat"> <div class="bubble"> <span class='tail'>&nbsp;</span> <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother keeper and the finder of lost children.</p><p>And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p> </div> </div> 

SCSS:

 $shadow_radius = 6px; $nose_size = 12px; $shadow = 0 1px $shadow_radius #B2B2B2; $border = 1px solid #bbb .chat { font-family: sans-serif; font-size: small; } .bubble { background-color: #F2F2F2; border-radius: 5px; border: $border; box-shadow: $shadow; display: inline-block; padding: 10px 18px; margin-left: ($shadow_radius + $nose_size); margin-right: ($shadow_radius + $nose_size); position: relative; vertical-align: top; } .tail { position: absolute; top: $nose_size; left: -($shadow_radius + $nose_size); height: ($shadow_radius + $nose_size); width: ($shadow_radius + $nose_size); overflow: hidden; } .tail:before { border: $border; background-color: #F2F2F2; box-shadow: $shadow; content: "\00a0"; display: block; position: absolute; top: 0px; left: $nose_size; height: $nose_size; width: $nose_size; -webkit-transform: skew( -45deg ); -moz-transform: skew( -45deg ); } 

Answer 3

I know this is a little complicated, but I seem to like it. Here is the fiddle http://jsfiddle.net/dzfj6/

HTML

 <div class="bubble"> <div class="triangle"></div> <div class="border"></div> <div class="content">some content</div> </div> 

CSS

 .bubble { height: 200px; width: 275px; float:right; margin-top: 41px; margin-left:11px; background-color: #f2f2f2; -webkit-border-radius: 5px; -webkit-box-shadow: 0px 0px 5px #b2b2b2; position:relative; z-index:1; } .triangle { position:absolute; top:12px; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 10px solid #f2f2f2; margin-left:-9px; z-index:3; } .border { position:absolute; top:12px; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 10px solid #e0e0e0; margin-left:-10px; z-index:2; } .content{ padding:10px; } 

Instead of box-shadow you can just use border for buble.

Answer 4

Another solution is to use filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); It only places a shadow around the shape of the objects.

Answer 5

Do not use box-shadow .

  height: 200px; width: 275px; float:right; margin-top: 41px; margin-left:11px; background-color: #f2f2f2; -webkit-border-radius: 5px; -webkit-box-shadow: 0px 0px 5px #b2b2b2; position:relative; z-index:1;