0

不規則な形状に影を適用する方法を探しています。従来の方法で影を適用して得られた結果はボックスであり、望ましい結果は形状の周りの影です。

divでこの形状を持っているとしましょう:

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

上の画像は私が得たものです。(*) 始点は影です。

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

これは私が望むものです......

コード：

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

}

4

1 に答える 1

0

このようなものを使用できますか?: (上部に 1 つの div を作成し、メイン コンテナーに 1 つを作成しますか?)

<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 ;
}​​
于 2012-06-22T12:26:25.860 に答える