CSS-тень вокруг пользовательской формы?

Привет,

Мне нужно создать div, который выглядит следующим образом:

Что я придумал, так это: 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;
}

Как видите, "единственной" проблемой является тень от ящика вокруг хвоста пузыря (треangularьная стрелка).

Я также пытался не использовать before- & after-псевдоклассы, но используют второй div, который содержит только треangularьник (с преобразованием, вращением,...), но, очевидно, это также не привело меня к успеху.

Статическое изображение не подходит, потому что размер самого прямоangularьника и положение хвоста являются динамическими и могут изменяться во время "выполнения".

Я также придумал решение, в котором я создаю рамку & тень с динамически зарожденным svg. Если другого варианта найти не удастся, я буду придерживаться этого решения, но оно выглядит довольно сильным, как "взлом". Я не публикую здесь это решение, потому что оно включает 2 javascript-framworks (extjs & Raphael), и этот вопрос должен быть о html & CSS. Тем не менее я мог бы предоставить это, если кто-то заинтересован в этом...

И последнее: совместимость с браузерами не такая уж большая проблема. Если это работает в последних версиях больших (Firefox, Chrome, Opera, то есть 10,...) все в порядке;)

Спасибо,

МИК

Ответ 1

Используйте drop-shadow:

возможно эта статья (box-shadow-vs-filter-drop-shadow) поможет вам

Ответ 2

Возможно, это не в ваших интересах сделать это, я оставил бы это как есть.

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

Вы можете перейти к "Метод двойной коробки", и он показывает очень ручной способ сделать это, используя :before и :after (которые вы уже использовали для создания пузыря) с помощью transform, Если вы действительно хотели это сделать, вы можете поплавать стрелкой влево и применить тени через псевдоэлементы.

Ответ 3

Вы должны использовать from filter в вашем CSS, а затем установить значение drop-shadow($yourshadow) для значения. Нет никакой разницы, чтобы написать тень для filter: drop-shadow($yourshadow) функция filter: drop-shadow($yourshadow) или shadow: $yourshadow в качестве свойства. Вы можете написать как ниже:

.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>