Unexpected box-shadow behaviour

Question

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?

Thanks!

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.

I think that what you're trying to do is relevant to this previous post on SA: http://stackoverflow.com/questions/5549594/css-drop-shadow-for-css-drawn-arrow — Billy Moat, Jul 23 '12 at 14:10
@billyMoat Oh, I saw that post, but I want the tail to be a right-angled triangle, because I am a bit stubborn like that. Hahaha — omninonsense, Jul 23 '12 at 14:14
@BillyMoat Oh, look what I found: ◥ and ◤. Post an answer so I can mark it as read! :D — omninonsense, Jul 23 '12 at 14:25
@withadot. The issue with using a unicode character is that they render differently in different browsers. You might find that they are more trouble than they are worth (in this case, when you need them to line up). — joshnh, Jul 26 '12 at 22:17

score 1 · Accepted Answer · edited May 23 '17 at 11:53

1

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

edited May 23 '17 at 11:53

Community

1
1

answered Jul 23 '12 at 15:42

Billy Moat

20,792
7
45
37

score 0 · Answer 2 · answered Jul 23 '12 at 14:20

0

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.

answered Jul 23 '12 at 14:20

Rowan

5,597
2
22
32

Technically, it is, only in webkit however. Using the filter property. – joshnh Jul 24 '12 at 05:44
If webkit-only is an option, yeah that's fine. It depends whether you're happy with other browsers degrading to having no shadow on the tail – Rowan Jul 24 '12 at 11:50

Unexpected box-shadow behaviour

2 Answers2