Наложение на ящик-теней

Question

Я пытаюсь отобразить вложенную тень на двух элементах и ​​наложить их, чтобы они выглядели хорошо с вкладкой. Все выглядит отлично, за исключением одного угла, где я не могу понять, как сделать его гладким. (выделено желтым цветом).

JsFiddle for test
это мой HTML:

<div class="container"> 
    <div class="outerWell"> 
    <div class="well" style="padding-top:15px"> 
     text 
    </div> 
    </div> 
    <div class="well" style="margin-top:40px"> 
     test 
    </div> 
</div> 

, а затем у меня есть CSS, который создает тень и скрывает одну сторону тени с overflow:hidden
(.well класс взят из начальной загрузки)

.well { 
    min-height: 20px; 
    padding: 19px; 
    margin-bottom: 20px; 
    background-color: #f5f5f5; 
    border: 1px solid #e3e3e3; 
    overflow:hidden; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    -moz-box-shadow: inset 0 0 5px 1px #888; 
    -webkit-box-shadow: inset 0 0 5px 1px #888; 
    box-shadow: inset 0 0 5px 1px #888; 
    } 
     .outerWell { 
     width: 200px; 
    overflow: hidden; 
    padding-bottom: 10px; 
    height: 35px; 
    margin-top: -40px; 
    position:absolute; 
     } 

Есть ли ea sy способ исправить мою проблему или, может быть, лучший способ сделать то, что я пытаюсь достичь?

Answer 1

Возможно, вы могли бы это сделать с помощью творческого использования псевдоэлементов. Посмотрите на this post on CSS-Tricks.