使用截断设置长方体阴影元素的样式

Question

我们正在尝试创建一个HTML页面，该页面由砖石风格的浮动元素组成，其中包含图片和标题。元素有阴影，页面有轻微的渐变背景。已经访问过的目标有一个折叠的角。

​

​

折角会导致几个问题：

1)如何才能使元素的箱体阴影在右侧和底部的折叠角之前结束？我们是否必须以css3之前的方式使用包含半透明渐变的div来处理阴影？

2)折角本身是怎么做的？我们不能仅仅在白色背景之上的右下角添加一个图像，因为页面的背景渐变必须显示出来。

Answer 1

到目前为止，我已经想出了四种方法：

方法1：这个方法背后的想法是在.box上使用两个伪元素来获取角，然后在.box-text上使用两个伪元素来获得右角的阴影- 。这个最大的问题是它是...好吧，丑陋。

HTML结构：

<div class="box">
    <header></header>
    <div class="box-text">
        <p>Text</p>
    </div>
</div>

相关CSS：

body {
    background: #ccc;
}
.box {
    box-shadow: 2px 2px 13px #000;
    position: relative;
    background: white;
}
.box:before, .box:after, .box-text:before, .box-text:after {
    position: absolute;
    content: '';
}
.box:before {
    bottom: -25px;
    right: -25px;
    width: 75px;
    height: 75px;
    background: #ccc;
}
.box:after {
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    box-shadow: -2px -2px 2px #777;
    background: linear-gradient(-45deg, transparent 38%, #333 50%, #faf0f0 50%);
}
.box-text:before {
    bottom: 32px;
    right: -15px;
    width: 15px;
    height: 18px;
    background: radial-gradient(top left, #333 0%, transparent 40%);
}
.box-text:after {
    bottom: -15px;
    right: 32px;
    width: 18px;
    height: 15px;
    background: radial-gradient(top left, #333 0%, transparent 40%);
}

方法2：对特定的角使用倾斜的伪元素以更好的方式组合阴影(我会在伪元素上有阴影)-

我认为这个版本看起来更好，而且还具有在IE9中工作的优势(前一个没有，因为它使用了CSS渐变)。

HTML将完全相同，而CSS将变为：

.box {
    box-shadow: 0 0 5px 1px #777;
    position: relative;
    background: white;
}
.box:before, .box:after, .box-text:before {
    position: absolute;
    z-index: 2;
    content: '';
}
.box:before {
    bottom: -38px;
    right: -38px;
    width: 71px;
    height: 71px;
    transform: rotate(45deg);
    z-index: 1;
    background: #ccc;
}
.box:after {
    bottom: 0;
    right: 0;
    border: solid 23px #f9f0f0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    box-shadow: -1px -1px 2px #777;
    z-index: 4;
}
.box-text:before {
    right: 0;
    bottom: 22px;
    width: 47px;
    box-shadow: 2px 2px 3px 1px #777;
    transform: skewY(-45deg);
}

方法3：我从前面的方法中得到了一个想法- 。我认为前一个看起来稍微好一点……

已更改的CSS：

.box:before {
    bottom: -24px;
    right: -7px;
    width: 35px;
    height: 70px;
    box-shadow: inset 2px 0 3px 1px #999;
    transform: rotate(45deg);
    z-index: 1;
    background: #ccc;
}
.box:after {
    bottom: 0;
    right: 0;
    border: solid 23px #f9f0f0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    box-shadow: -1px -1px 2px #777;
    z-index: 4;
}
.box-text:before {
    bottom: -27px;
    right: -10px;
    width: 35px;
    height: 70px;
    transform: rotate(45deg);
    background: #ccc;
}

方法4：只使用2个伪元素，两者都在框中-

.box:before, .box:after {
    position: absolute;
    z-index: 2;
    content: '';
}
.box:before {
    right: -8px;
    bottom: 22px;
    width: 65px;
    box-shadow: 2px 2px 5px 1px #777, 0 25px 0 25px #ccc;
    transform: rotate(-45deg);
}
.box:after {
    bottom: 0;
    right: 0;
    border: solid 23px #f9f0f0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    box-shadow: -1px -1px 2px #777;
    z-index: 4;
}