如何为透视效果制作透明边框？

Question

当我为现有网站制作新设计时，我必须在“视角”中绘制一些元素。

通过使用一些:before和:after伪元素，它很容易制作，但添加的角落是固定的颜色（白色），背景（白色）可以，但是不与其他一些元素（图片，其他bg颜色块）。不幸的是:outside, :before(2) and :after(2)似乎不起作用。

那么如何在CSS中使用透明角落制作以下菜单（没有gif，png或添加一些span）？

> Fiddle demo

HTML

<div class="relief">Some content</div>

CSS

.relief {
position:relative;
border-left:10px solid #CCC;
border-bottom:10px solid #CCC;
border-right:1px solid #CCC;
border-top:1px solid #CCC;
padding:10px;
background:#EDEDED;}

.relief:before, .relief:after {
content:"";
border:10px solid transparent;
position:absolute;
display:block;
z-index:10;}

.relief:before {
left:-10px;
top:-10px;
border-left:10px solid #FFF;
border-top:10px solid #FFF;}

.relief:after {
right:-10px;bottom:-10px;
border-right:10px solid #FFF;
border-bottom:10px solid #FFF;}

我用另一个系统制作的最好的，左下角的透明角和左上角的白色边框，我不想显示： 2nd fiddle demo

任何帮助将不胜感激。

Answer 1

这是一个如何用纯CSS完成它的例子。请务必添加任何供应商前缀。

div {
    box-shadow: -1px 1px 0px 1px rgba(0,0,0,0.5), -2px 2px 0px 1px rgba(0,0,0,0.5), -3px 3px 0px 1px rgba(0,0,0,0.5), -4px 4px 0px 1px rgba(0,0,0,0.5), -5px 5px 0px 1px rgba(0,0,0,0.5)
}

小提琴：http://jsfiddle.net/Z8zcW/