3

I have a div that i would like to look like a speech bubble with a box shadow around. Currently it looks like this:

enter image description here

problem is i cannot figure out how to add the shadow to the psuedo element "tail". Is this even possible? If i add box-shadow to the pseudo element, it looks like this which is certainly not i want:

enter image description here

I would really appreciate any guidance on this. Thanks

JS Fiddle

Code:

#container {
  height: 500px;
  background-color: #Febb68;
  padding: 30px;
}
#bubble {
  height: 200px;
  width: 200px;
  padding: 50px 60px 0;
  position: relative;
  z-index: 10;
  border-radius: 30px 0;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 10px 1px #944;
  margin-bottom: 55px;
}
#bubble:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-top: 85px solid rgba(255, 255, 255, 0.85);
  border-right: 85px solid transparent;
  border-left: 0px solid transparent;
}
<div id='container'>
  <div id='bubble'>
    ABC
  </div>
</div>

Edit: This question is different from CSS Speech Bubble with Box Shadow as the background in this case is transparent( this cannot be changed as the final background is an image and not a solid color) and the pointer slopes on one side only. This is how the solution to that question looks like with transparent background: http://jsfiddle.net/mek5Z/2140/

Community
  • 1
  • 1
SNAG
  • 2,011
  • 2
  • 23
  • 43
  • possible duplicate of [CSS Speech Bubble with Box Shadow](http://stackoverflow.com/questions/8866736/css-speech-bubble-with-box-shadow) – Salman A Mar 26 '15 at 14:18
  • @SalmanA This is not a duplicate of that question. the hack employed by the accepted answer is not applicable to this question – SNAG Mar 26 '15 at 14:37

2 Answers2

6

I have successfully got this result, but it needs to be optimized:

<div id='bubble' class="filter-drop-shadow">

.filter-drop-shadow {
    -webkit-filter: drop-shadow( 0 10px 1px #944);
    -moz-filter: drop-shadow(0 10px 1px #944);
    filter: drop-shadow(0 10px 1px #944);
    }

fiddle

TiyebM
  • 2,684
  • 3
  • 40
  • 66
  • 2
    Note that `filter` isn't supported by IE therefore the `-ms-` prefix isn't necessary and the `-o-` prefix never existed for this property (see [canIuse](http://caniuse.com/#feat=css-filters)) – web-tiki Mar 26 '15 at 16:21
  • The `-moz-` prefix never existed either. Filters got supported in Firefox unprefixed right from the start. – Ana Mar 26 '15 at 17:33
1

Won't let me comment so had to write this but maybe these references would help.

CSS Speech Bubble with Box Shadow

and

How to Create CSS3 Speech Bubbles Without Images

Community
  • 1
  • 1
Scanner
  • 597
  • 1
  • 9
  • 19
  • @SNAG, yes I see that the first article doesn't work for you. Try the second article there was some good tips on styling psuedo elements. – Scanner Mar 26 '15 at 14:54