CSS框阴影周围的自定义形状？ [英] CSS box shadow around a custom shape?

问题描述

Hy there，

我需要创建一个div，如下所示：

我到目前为止是这样：
将帮助您

Hy there,

I need to create a div which looks like this:

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

解决方案

Use drop-shadow:

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

这篇关于CSS框阴影周围的自定义形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！