有折叠的角落的箱子和在不可预测的背景的箱子阴影

Question

我正在尝试做这样的事情：

这些方框有阴影，角落的背景必须是透明的，因为它们在图像上方（不可预测的背景）。

在搜索Google之后，我找到了使用伪选择器:before和:after的解决方案以及使用额外标记的解决方案，但所有解决方案都使用固定的颜色背景。这些是我的结果：

我正在尝试使用方框阴影，只有一个小图像用于角落，而不是大的完整背景。

我怎么能这样做？

Answer 1

同时使用两个伪元素，一个用于上部框，另一个用于白色三角形：

h1 {
    background: #F0B032;
    box-shadow: 1px 1px 4px #362708;
    line-height: 30px;
    position: relative;
}
h1:before, h1:after {
    content: '';
    position: absolute;
    left: 100%;
}
​h1:before {
    background: #F0B032;
    box-shadow: 1px 1px 2px #362708;
    width: 15px;
    height: 16px;
    top: 0;
}
h1:after {
    border: 7px solid transparent;
    border-left-color: #fff;
    border-top-color: #fff;
    bottom: 0;
}

这是小提琴：http://jsfiddle.net/Kjp6v/

---

这不会在折叠下添加阴影，但看起来足够逼真。