使用截取样式设计箱形阴影元素

Question

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

的折角导致两个问题：

1）我们怎样才能在右侧和底部两侧的折叠角之前进行元素的的box-shadow结束了吗？我们是否需要使用包含半透明渐变的div s来完成前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：使用倾斜伪元件对于该特定角结合的阴影在一个更好的方式（I会在伪元素上产生阴影） - 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; 
}