Question

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

Example of what we're trying to achieve

折角会导致一些问题：

1）如何在右侧和底侧的折角之前制作元素的盒子阴影末端？我们是否必须使用包含半透明渐变的div以CSS3前的方式进行阴影处理？

2）如何折叠角落本身？我们不能只在白色背景上方的右下角施加图像，因为页面的背景渐变必须显示出来。

Answer 1

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

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

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 ：使用针对该特定角落的偏斜伪元素以更好的方式组合阴影（我会在伪元素上有阴影） - demo

我认为这个看起来更好，并且还具有在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 ：我从之前的方法中得到了一个想法 - demo。我认为前一个看起来稍微好一些......

已更改的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个伪元素 - demo

.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;
}

使用cutoff设置框阴影元素的样式

1 个答案: