html/css make multiple sections that drop shadow one on another - html

Question

I have multiple sections placed one after another, each of them should drop shadow on the next one. Number of sections might change
My current idea is to create about 10 css rules like
section {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
section:nth-child(1){
z-index:10
}
section:nth-child(2) {
z-index:9
}
...
This approach has obvious flaw, so my question is - is there more elegant way to achieve this using only html/css?
Set z-index automatically somehow or make shadows in completely different way?

Answer 1

It's actually possible without using JavaScript or a pseudo-element.
Just using the transform-style: preserve-3d property and a specific rotation.
.section {
height: 32px;
width: 100%;
background: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transform: rotateX(1deg);
}
.wrapper {
transform: rotateX(-1deg);
transform-style: preserve-3d;
}
<div class="wrapper">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>

Answer 2

It's impossible to do it via html/css. But you can use javascript:
for (var i=$("section").length; i > 1; i++){
$("section:nth-child(" + i +")").css ({"z-index":i});
}
And css:
section {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}