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):

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:

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.

Answer 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