Question

Consider the following:

HTML

<div class="info_bubble">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ornare ligula et nulla auctor vitae tincidunt erat congue.</p>
</div>

CSS

.info_bubble {
    padding: 0 15px;
    margin: 1em 0 3em;
    border: 5px solid #FFF;
    background: #A6CE39;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 200px;
    box-shadow: 0 0 10px #000;
    color: #FFF;
    position: absolute;
    left: 50px;
    top: 50px;
}

.info_bubble::before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 40px;
    border-width: 20px 20px 0;
    border-style: solid;
    display: block;
    width: 0;
    top: 10px;
    bottom: auto;
    left: -23px;
    border-width: 15px 23px 15px 0;
    border-color: transparent #FFF;
}

.info_bubble::after {
    content: "";
    position: absolute;
    bottom: -13px;
    left: 47px;
    border-width: 13px 13px 0;
    border-style: solid;
    display: block;
    width: 0;
    top: 16px;
    bottom: auto;
    left: -15px;
    border-width: 9px 15px 9px 0;
    border-color: transparent #A6CE39;
}​

An example: http://jsfiddle.net/ysqQV/2/

The above generates a “Speech bubble” with a triangular “arrow” from the left-hand side. The arrow is created from borders, part transparent and part opaque.

I would like to use a box-shadow behind the speech bubble but this goes a little funky around the arrow as it drops a shadow from the whole element and not just the opaque section.

Example: http://jsfiddle.net/ysqQV/1/

I know this is normal behaviour and not an error but I would love to be able to clip the box-shadow to the opaque section of the arrow.

I can’t use a single image for the speech bubble as the content could be of any height and I’d like to avoid using multiple images pieced together just because this solution is SO much cleaner.

Can anyone think of a viable work-around?

Answer 1

What you are after isn’t possible. However, I know a few workarounds:

First and easiest, loose the drop shadow from the arrow. It will still look good.

Secondly, use an image and bake in the shadow for the arrow. Might not be ideal, but it works.

Third option, just make a 20 by 20 square, with all those styles and then rotate it with a transform. You’ll get a diamond, so next step is to use a mask to hide the edge you don’t need. I’ve done this before, but it definitely goes a bit fuzzy in the process so I actually ended up going with the first option. If you can’t use a mask, you can wrap the arrow in a div/span or something and set that to overflow hidden. Extra code, but same result.

I can provide an example for the final option if you need, but it’ll be tonight before I get a chance.

Personally, I’d go with the first option though.

Hope that helps 🙂