非重複コーナーボックスシャドウ

Question

以下の例では、重なり合わないボックスシャドウをどのように作成しますか？

あなたが目標として考えているのは、.topと.sideのボックスシャドウを、可能な場合は重複しないように変更せずに作成することです。

編集：両方のボックスシャドウは、ぼかし半径> 0でなければなりません。

編集2：「重複しない」とは、この場合、両方のシャドウが他の要素にドロップしないことを意味します。

編集3：詳しい説明は​​の素晴らしい画像を参照してください。

Fiddle

コード：

.wrapper-all { 
 
    padding-left: 50px; 
 
} 
 
.wrapper-side { 
 
    margin-left: -50px; 
 
    left: 50px; 
 
} 
 
.top { 
 
    position: relative; 
 
    background-color: #fff; 
 
    height: 20px; 
 
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 1); 
 
    -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 1); 
 
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 1); 
 
} 
 
h2, 
 
p { 
 
    text-indent: 15px; 
 
} 
 
.side { 
 
    position: fixed; 
 
    width: 50px; 
 
    height: 100%; 
 
    background-color: #fff; 
 
    -webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 1); 
 
    -moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 1); 
 
    box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 1); 
 
}

<div class="wrapper-all"> 
 
    <div class="wrapper-side"> 
 
    <div class="side"></div> 
 
    </div> 
 
    <div class="wrapper-top"> 
 
    <div class="top"> 
 
     <p>My shadow is overlapping on the left. Not cool.</p> 
 
    </div> 
 
    </div> 
 
    <h2>Have a nice day! :)</h2> 
 
</div>

Answer 1

シャドウを拡大してぼかしをシャドウ自体の一部であり、ぼかしはブロックの別の側面からは見えません。そのためには、広がり半径（影の4番目のパラメータ）を定義する必要があります。正の値は影のサイズを大きくし、負の値はサイズを小さくします。デフォルトは、（影をぼかしと同じサイズである）0：

両方要素

.wrapper-all { 
 
    padding-left:50px; 
 
} 
 
.wrapper-side { 
 
    margin-left: -50px; 
 
    left: 50px; 
 
} 
 

 
.top { 
 
    position: relative; 
 
    background-color: #fff; 
 
    height: 20px; 
 
    -webkit-box-shadow: 2px 7px 5px -2px rgba(0,0,0,1); 
 
    -moz-box-shadow: 2px 7px 5px -2px rgba(0,0,0,1); 
 
    box-shadow: 2px 7px 5px -2px rgba(0,0,0,1); 
 
} 
 
h2, p { 
 
    text-indent: 15px; 
 
} 
 
.side { 
 
    position: fixed; 
 
    width: 50px; 
 
    height: 100%; 
 
    background-color: #fff; 
 
    -webkit-box-shadow: 7px 2px 5px -2px rgba(0,0,0,1); 
 
    -moz-box-shadow: 7px 2px 5px -2px rgba(0,0,0,1); 
 
    box-shadow: 7px 2px 5px -2px rgba(0,0,0,1); 
 
}

<div class="wrapper-all"> 
 
    <div class="wrapper-side"> 
 
    <div class="side"> 
 
    </div> 
 
    </div> 
 
    <div class="wrapper-top"> 
 
    <div class="top"> 
 
    <p> 
 
    My shadow is overlapping on the left. Not cool. 
 
    </p> 
 
    </div> 
 
    </div> 
 
    <h2> 
 
    Have a nice day! :) 
 
    </h2> 
 
</div>

Answer 2

私はこの権利を理解していれば、私は、これはあなたが望むものであると思いますか？ だけで位置を削除：トップdiv要素の相対..

.wrapper-all { 
 
    padding-left:50px; 
 
} 
 
.wrapper-side { 
 
    margin-left: -50px; 
 
    left: 50px; 
 
} 
 

 
.top { 
 

 
    background-color: #fff; 
 
    height: 20px; 
 
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,1); 
 
    -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,1); 
 
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,1); 
 
} 
 
h2, p { 
 
    text-indent: 15px; 
 
} 
 
.side { 
 
    position: fixed; 
 
    width: 50px; 
 
    height: 100%; 
 
    background-color: #fff; 
 
    -webkit-box-shadow: 5px 0px 5px 0px rgba(0,0,0,1); 
 
    -moz-box-shadow: 5px 0px 5px 0px rgba(0,0,0,1); 
 
    box-shadow: 5px 0px 5px 0px rgba(0,0,0,1); 
 
}

<div class="wrapper-all"> 
 
    <div class="wrapper-side"> 
 
    <div class="side"> 
 
    </div> 
 
    </div> 
 
    <div class="wrapper-top"> 
 
    <div class="top"> 
 
    <p> 
 
    My shadow is overlapping on the left. Not cool. 
 
    </p> 
 
    </div>

Answer 3

私はこのトラブルにもありましたし、私はこの醜いハックでそれを解決：

.top { 
    box-shadow: 2px 5px 5px 0px rgba(0,0,0,1); 
} 
.top:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: -5px; 
    width: 5px; 
    height: 100%; 
    background: #fff; /*same as side bg*/ 
} 

編集： https://jsfiddle.net/kantoci/25k5z7eq/5/