这个堆叠的盒子效果可以只使用CSS完成吗？

Question

我已经看到其他复杂的效果只用CSS就像堆叠的纸张效果一样：

http://jsfiddle.net/thefrontender/LwW7g/

<div class="slide expandable-slide">Title</div>
<div class="slide">Title</div>

.slide {
    float: left;
    display: block;
    position: relative;
    background: #FFF;
    height: 10em;
    width: 10em;
    padding: 1em;
    border: solid 2px #000;
    margin-right: 2em;
}

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

我的需求非常相似，除了2个外边缘需要与主正面div连接：

任何人都知道可以使这成为可能的任何技巧吗？

Answer 1

如果你能够使用CSS伪元素：

.slide {
    position: relative;
    width: 200px; /* arbitrary, adjust to taste */
    height: 500px; /* arbitrary, adjust to taste */
    border: 2px solid #000;
    border-right-width: 40px; /* this is the 'depth' of the 'sides' */
    border-bottom-width: 40px;
}

.slide::before {
    content: '';
    position: absolute;
    top: -2px; /* to cover the top of the border */
    left: 100%;
    border: 20px solid #fff;
    border-bottom-color: transparent; /* allows the containing element's border to be seen */
    border-left-color: transparent;
}

.slide::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -2px;
    border: 20px solid #fff;
    border-top-color: transparent;
    border-right-color: transparent;
}

JS Fiddle demo

以上使用以下HTML：

<div class="slide">Title</div>

Answer 2

你可以这样做（不是最优雅，但像魅力一样）：

.expandable-slide {
    margin: 2em 2em 0 2em;
    box-shadow: 0.05em 0.05em #555,
                 0.1em 0.1em #555,
                 0.15em 0.15em #555,
                 0.2em 0.2em #555,
                 0.25em 0.25em #555,
                 0.3em 0.3em #555,
                 0.35em 0.35em #555,
                 0.4em 0.4em #555,
                 0.45em 0.45em #555,
                 0.5em 0.5em #555
        ;               
}

fiddle

Answer 3

你可以叠加多个方框阴影来达到你想要的效果：

.slide {
    height: 200px;
    width: 100px;
    padding: 1em;
    border: solid 2px #000;
}
.expandable-slide {
    margin: 10px 10px 0 10px;
    box-shadow: 1px 1px #999, 
        2px 2px #999, 
        3px 3px #999, 
        4px 4px #999, 
        5px 5px #999, 
        6px 6px #999, 
        7px 7px #999, 
        8px 8px #999, 
        9px 9px #999, 
        10px 10px #999;
}

<强> jsFiddle example

Answer 4

.expandable-slide {
    position: relative;
    margin: 2em 2em 0 2em;

    box-shadow: 20px 25px 0px 0px #333;

}
.expandable-slide:before {
position: absolute;
content: "";
color: #333;
background: #333;
width: 0px;
height: 0px;
border-right: 15px solid #333;
border-top: 10px solid #333;
border-bottom: 15px solid #fff; /*match background color*/
border-left: 10px solid #fff;/*match background color*/
top: 194px;
left: 0px;
}
.expandable-slide:after {
position: absolute;
content: "";
color: #333;
background: #333;
width: 0px;
height: 0px;
border-bottom: 15px solid #333;
border-left: 10px solid #333;
border-right: 10px solid #fff; /*match background color*/
border-top: 15px solid #fff;/*match background color*/
top: 0px;
left: 194px;    
}