只使用css获取堆叠元素盒子阴影效果？

Question

我有一个UI元素，它应该表示在工作流程中稍后将表示的项目扩展为多个项目。我的想法是有它看起来像这样：

凡实际图像总是不同的。

如果元素是这种类型，它会被标记一个特殊的类expandable-slide这是应用程序的alpha版本，所以我不在乎花很多时间把新的html和小部件，但它也是一个星期天，所以我愿意玩一下，看看是否有可能只使用CSS来获得该效果。

对我而言，堆叠效应与box-shadow非常相似，只是其中一个具有多种阴影，颜色略有不同，并被不同的量抵消。我不确定这种方法可行，但这正是我目前正在尝试的方法。

浏览器的要求是现代铬/火狐

Answer 1

box-shadow可以接受multiple shadow effects效仿你以后的样子。这里

.expandable-slide { 
    margin: 2em 0 0 2em; 
    box-shadow: -1em -1em #666, 
       -2em -2em #333; 
} 

工作样本：http://jsfiddle.net/thefrontender/LwW7g/