Поднятые угловые тени, простирающиеся в сторону

Question

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

Я обнаружил, что тень построена из двух, сплошных цветов, прямоугольных объектов, которые бросают тень. Они прячутся за div под углом, который создает этот «кудрявый» лист листового теневого эффекта. Этот угол также выдает их при использовании с очень высоким блоком div.

Я не очень хорошо разбираюсь в CSS, поэтому я не знаю, как это исправить. Я попытался ограничить свойство max-height прямоугольников, но это делает их слишком короткими, чтобы оставить тени под div. Есть ли способ, чтобы ящики приклеивались к нижней части div и никогда не расширялись по бокам?

Это тень я использовал:

.shadow { 
position: relative; 
} 
.shadow:before, .shadow:after { 
    z-index: -1; 
    position: absolute; 
    content:""; 
    bottom: 12px; 
    left: 7px; 
    width: 50%; 
    top: 80%; 
    max-width: 300px; 
    background: #777; 
    -webkit-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6); 
    -moz-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6); 
    box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6); 
    -webkit-transform: rotate(-4deg); 
    -moz-transform: rotate(-4deg); 
    -o-transform: rotate(-4deg); 
    -ms-transform: rotate(-4deg); 
     transform: rotate(-4deg); 
} 
.shadow:after { 
    -webkit-transform: rotate(4deg); 
    -moz-transform: rotate(4deg); 
    -o-transform: rotate(4deg); 
    -ms-transform: rotate(4deg); 
    transform: rotate(4deg); 
    right: 7px; 
    left: auto; 
} 

Вы можете увидеть пример в этой скрипке, первый ДИВ показывает тень работает должным образом, вторая показывает проблему: jsfiddle

Answer 1

вы можете удалить top на псевдоэлементах и ​​придать им фиксированную высоту. Вы также можете дать значение max-height псевдо элементы, гарантирует, что они не переполнить DIV, когда коротко:

DEMO

.box { 
    background-color: #3a6fa9; 
    display: block; 
    padding: 4px; 
    margin-bottom: 30px; 
    margin-left: 30px; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    width: 500px; 
    height: 300px; 
} 
.box-tall { 
    width: 500px; 
    height: 2000px; 
} 
.shadow { 
    position: relative; 
} 
.shadow:before, .shadow:after { 
    z-index: -1; 
    position: absolute; 
    content:""; 
    bottom: 12px; 
    height:100px; 
    max-height:10%; 
    left: 7px; 
    width: 50%; 
    max-width: 300px; 
    background: #777; 
    -webkit-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6); 
    -moz-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6); 
    box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6); 
    -webkit-transform: rotate(-4deg); 
    -moz-transform: rotate(-4deg); 
    -o-transform: rotate(-4deg); 
    -ms-transform: rotate(-4deg); 
    transform: rotate(-4deg); 
} 
.shadow:after { 
    -webkit-transform: rotate(4deg); 
    -moz-transform: rotate(4deg); 
    -o-transform: rotate(4deg); 
    -ms-transform: rotate(4deg); 
    transform: rotate(4deg); 
    right: 7px; 
    left: auto; 
} 

Answer 2

Вместо top: 80%;, вы можете просто установить небольшую высоту, например height: 20px;:

.shadow:before, .shadow:after { 
z-index: -1; 
position: absolute; 
content: ""; 
bottom: 12px; 
left: 7px; 
width: 50%; 
height: 20px; 
/* top: 80%; */ 
max-width: 300px; 
background: #777; 
-webkit-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6); 
-moz-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6); 
box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6); 
-webkit-transform: rotate(-4deg); 
-moz-transform: rotate(-4deg); 
-o-transform: rotate(-4deg); 
-ms-transform: rotate(-4deg); 
transform: rotate(-4deg); 
} 

Answer 3

вашей скрипка обновление: http://jsfiddle.net/e6yh07pd/3/

проблема была

top:80%; 

ценность у вас есть. не могу понять, почему вы использовали его ... isteed удалите его и просто добавьте фиксированную высоту (px) для вашего после и до