Appliquer une ombre aux div irréguliers

Question

Je suis fou de conduite à la recherche d'un moyen d'appliquer une ombre à une forme irrégulière. Les résultats obtenus en appliquant une ombre d'une manière conventionnelle sont une boîte dont le résultat désiré est une ombre autour d'une forme.

Disons que j'ai cette forme avec divs:

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

L'image ci-dessus est ce que je reçois. (*) Les départs sont l'ombre.

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

Voici ce que je veux ......

code:

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

Le 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

Pouvez-vous utiliser quelque chose comme ça ?: (Make un div pour le haut et un pour le conteneur principal?)

<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 ; 
}​​