Search code examples
htmlcsscss-shapes

CSS box shadow around a custom shape?

Hy there,

I need to create a div which looks like this:

screenshot

What i've came up with so far is this: http://jsfiddle.net/suamikim/ft33k/

.bubble {
    position: relative;
    width: 80px;
    height: 160px;
    border: 1px solid #33A7F4;
    border-radius: 9px;
    margin: 100px;
    -webkit-box-shadow: 0px 0px 20px 2px #33A7F4;
    -moz-box-shadow: 0px 0px 20px 2px #33A7F4;
    -ms-box-shadow: 0px 0px 20px 2px #33A7F4;
    -o-box-shadow: 0px 0px 20px 2px #33A7F4;
    box-shadow: 0px 0px 20px 2px #33A7F4;

}

.bubble:after, .bubble:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    border: 17px solid transparent;
    right: 100%;
}

.bubble-left:before {
    border-top-color: #33A7F4;
    border-right-color: #33A7F4;
    top: 60px;
}

.bubble-left:after {
    border-width: 16px;
    border-top-color: black;
    border-right-color: black;
    top: 61px;
}

As you can see the "only" problem is the box-shadow around the tail of the bubble (the triangular arrow).

I've also tried to not use the before- & after-pseudo-classes but use a second div which only holds the triangle (with transformation, rotation, ...) but obviously that didn't lead me to no success neither.

A static picture is no option because the size of the rectangle itself and the position of the tail are both dynamic and can change during "runtime".

I've also came up with a solution where i create the border & the shadow with a dynamically gernerated svg. If no other option can be found i'm going to stick with this solution but it feels pretty strong like a "hack". I'm not posting this solution here because it involves 2 javascript-framworks (extjs & raphael) and this question should be about html & css. Nonetheless i could still provide it if someone is interested in it...

One last thing: Browser-compatibility is not that big a deal. If it's working in the latest versions of the big ones (firefox, chrome, opera, ie 10, ...) everything is fine ;)

Thanks,

mik

Solution

  • Use drop-shadow:

    enter image description here

    enter image description here

    maybe this article (box-shadow-vs-filter-drop-shadow) will help you