Unexpected box-shadow behaviour


I was trying to draw a small triangle (as the tail of a rectangular chat-bubble) in CSS. I managed to do that, but then I wanted to apply a box-shadow to the tail and the box. So, I have the following CSS for the tail:

#bubble::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -22px;
    left: 10px;
    border-width: 22px 0 0 20px;
    border-style: solid;
    border-color: #fff transparent;
    -webkit-box-shadow:  5px 5px 5px 0px rgba(0, 0, 0, .6);
    box-shadow:  5px 5px 5px 0px rgba(0, 0, 0, .6);

Which renders this (Sorry; background is a bit blurry because of the zoom):

The tail rendered in Chrome

Notice how the box-shadow doesn't render alongside the diagonal part of the bubble's tail.

The desired effect I would like to achieve is:

enter image description here

This is a screenshot from inside Photoshop, so it might looks a bit different than the partial screenshot of the browser's portview (the shadow is supposed to be larger, I forgot to update the layer style after scaling the path).

How would I achieve that?


P.S: I am open to the thought of using a raster image or a SVG, although I'd prefer if I didn't have to.

Problem courtesy of: omninonsense


I think that what you're trying to do is relevant to this previous post on SA: CSS Drop Shadow for CSS drawn arrow

Solution courtesy of: Billy Moat


I'm afraid that's not possible with CSS only. box-shadow applies to the element's box, with an image that's still a rectangle :)

See http://lineandpixel.com/blog/png-shadow for a write-up from another frustrated user.

You'll have to bite the bullet and use a raster image or SVG.

Discussion courtesy of: Rowan

This recipe can be found in it's original form on Stack Over Flow.