Примените тень к нерегулярным divs

Question

Я воюю с ума, ища способ применить тень к неправильной форме. Полученные результаты, применяя тень конвективным способом, являются полем, желаемым результатом является тень вокруг фигуры.

Допустит, у меня есть эта форма дива:

************************************************* 
    +----------------+        * 
    |    |        * 
    +----------------------------------------------+* 
    |            |* 
    |            |* 
    |            |* 
    |            |* 
    +----------------------------------------------+* 

На рисунке выше это то, что я получаю. (*) Запуски - это тень.

******************* 
    +----------------+*        
    |    |******************************* 
    +----------------------------------------------+* 
    |            |* 
    |            |* 
    |            |* 
    |            |* 
    +----------------------------------------------+* 

Это то, что я желаю ......

Код:

<div class="shadow_area"> 
    <div class="menu_up_message"> 
     <div class="image_holder"> 
      <div class="image_icon" style="margin-left:10px"></div> 
      <div class="image_text" >image</div> 
     </div> 
     <div class="video_holder"> 
      <div class="video_icon"></div> 
      <div class="image_text">video</div> 
     </div> 
     <div class="link_holder"> 
      <div class="link_icon"></div> 
      <div class="image_text">link</div> 
     </div> 
    </div> 
    <div class="message_input_holder"> 
     <textarea name="msg" class="message_textarea"></textarea> 
    </div> 
</div> 

CSS-код:

.shadow_area { 
-webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 1); 
-moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 1); 
box-shadow:   0px 0px 10px rgba(50, 50, 50, 1); 

}

Answer 1

Не могли бы вы использовать что-то вот так ?: (Make один div для верхней части и один для основного контейнера?)

<div class="first">&nbsp;</div> 
<div class="myDiv">&nbsp;</div> 


.first 
{ 
    margin-top: 10px; 
    margin-left: 10px; 
    border: 1px solid #333; 
    width: 100px; 
    height: 50px; 
    -webkit-box-shadow: 6px -5px 4px -2px #888 ; 
    background:#fff; 
    border-bottom:0px; 
} 
.myDiv 
{ 
    margin-top:-1px; 
    margin-left: 10px; 
    border: 1px solid #333; 
    width: 400px; 
    height: 100px; 
    -webkit-box-shadow: 10px -4px 5px -2px #888 ; 
}​​