Css - теневые накладки других элементов

Question

У меня мало div и каждая из них имеет тень, но тень div всегда накладывает следующий div.

вот мой код: HTML:

<div> 
Some Text 
</div> 
<div> 
Some Text 
</div> 
<div> 
Some Text 
</div> 
<div> 
Some Text 
</div> 
<div> 
Some Text 
</div> 

CSS:

div { 
    background-color:white; 
    text-align:center; 
    box-shadow: 0 0 3px 5px black; 
} 

скрипку: https://jsfiddle.net/81t4v4a5/

Я хочу сделать что-то подобное, но без контейнера: https://jsfiddle.net/kc98heaw/

Это возможное?

Answer 1

Это то, что вы ищете?

скрипку: https://jsfiddle.net/y6097xso/

Я попытался перебрать все дивы и нарисуйте тень с выражением:

div { 
 
    background-color:white; 
 
    text-align:center; 
 
    box-shadow: 0 0 3px 5px black; 
 
} 
 
div:nth-child(2n){ 
 
    position: relative; 
 
    box-shadow: 9px 0 4px -4px black, -9px 0 4px -4px black; 
 
}

<div> 
 
Some Text 
 
</div> 
 
<div> 
 
Some Text 
 
</div> 
 
<div> 
 
Some Text 
 
</div> 
 
<div> 
 
Some Text 
 
</div> 
 
<div> 
 
Some Text 
 
</div>