CSS box shadow around a custom shape?

Question

Hy there,

I need to create a div which looks like this:

screenshot http://imageshack.us/a/img19/8223/bubblep.png

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

Answer 1

Use drop-shadow:

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

Answer 2

It's probably not in your best interest to do this, I would leave it as is.

http://css-tricks.com/triangle-with-shadow/

You can skip down to "The Double-Box Method" and it shows a very manual way of doing this using :before and :after (which you already used up making the bubble) with the help of transform. If you really wanted to do this, you could float the arrow to the left and apply shadows through the pseudo elements.

Answer 3

You should use from filter in your CSS then set the drop-shadow($yourshadow) function for value. There is no difference to write shadow for filter: drop-shadow($yourshadow) function or shadow: $yourshadow as a property. You can write like below:

.shape1, .shape2{
  transform: rotate(35deg);
  background: yellow;
  height: 100px;
  width: 100px;
  display: inline-block;
}

.myshape{
  margin: 30px;
  filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.5));
}

<div class="myshape">
  <div class="shape1"></div>
  <div class="shape2"></div>
</div>

Enjoy...