CODEWITHSUNDEEP
css
omninonsense
omninonsense

Reputation: 6892

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?

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.

Upvotes: 1

Views: 287

Answers (2)

Billy Moat
Billy Moat

Reputation: 21050

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

Upvotes: 1

Rowan
Rowan

Reputation: 5737

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.

Upvotes: 0

Related Questions