如何爲透視效果製作邊框的透明邊角？

當我爲一個現有的網站做一個新的設計時，我必須在「透視」中畫出一些元素。如何爲透視效果製作邊框的透明邊角？

通過使用一些: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

如何爲透視效果製作邊框的透明邊角？

回答

相關問題