有被折叠的角落和箱子阴影的箱子在不可预测的背景 [英] Boxes with folded corner and box shadow over an unpredictable background

问题描述

我想这样做：

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

The boxes have shadows and the background of the corners must be transparent because they are over an image (unpredictable background).

搜索Google后，我发现使用伪选择器：之前和：以及使用额外标记的解决方案，但他们都使用固定的颜色背景。这是我的结果：

After searching Google, I found solutions using pseudo selectors :before and :after as well as solutions using extra markup, but all of them use a fixed colour background. These were my results:

我试图使用箱形阴影，只有一个小的图像为角落，而不是一个大的完整的背景。

I'm trying to use box-shadows and only a small image for the corner, instead of a large complete background.

我如何做到这一点？

推荐答案

使用伪元素，其他为白色三角形：

Use both the pseudo-elements, one for the upper box, the other for the white triangle:

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/

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

This does not add a shadow under the fold, but looks realistic enough.

这篇关于有被折叠的角落和箱子阴影的箱子在不可预测的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！