html - 在不可预测的背景上具有折叠角和框阴影的框

Question

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

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

在谷歌搜索后，我找到了使用伪选择器的解决方案: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/

---

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