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

当我为一个现有的网站做一个新的设计时，我必须在“透视”中画出一些元素。如何为透视效果制作边框的透明边角？

通过使用一些:before和:after伪元素，很容易做到，但添加的角部是在一个固定的颜色（白色）至极是与背景（白色）确定，但不与其他一些元素（图片，其他颜色块）。不幸的是:outside, :before(2) and :after(2)似乎没有工作。

Demo of the white corners

所以我怎么可能做出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

任何帮助将不胜感激。

来源

2013-04-28 Valky

我misundestood。我很抱歉@Valky。 – 2013-04-28 22:27:50

别担心，我已将题目标题改为“透明的边界角”，它会更容易理解。 – Valky 2013-04-28 22:29:26

下面是如何使用纯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/

来源

2013-04-29 02:04:00 Xarcell

非常感谢你，我在这里尝试过http://jsfiddle.net/Z8zcW/1/正常工作。 +1 – Valky 2013-04-29 12:50:28

欢迎您... – Xarcell 2013-04-29 16:15:31

但它似乎并不适用于手机。使用iPhone 3测试。 – Valky 2013-04-29 17:09:46

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

回答

相关问题