원근감 효과를 위해 테두리의 투명 모서리를 만드는 방법은 무엇입니까?

Question

기존 웹 사이트의 새로운 디자인을 만들면서 "관점"에서 몇 가지 요소를 그려야합니다.

의사 요소를 사용하여 일부 :before 및 :after 의사 요소를 사용하면 쉽게 만들 수 있지만 추가 된 모서리는 배경색 (흰색)에서는 고정 색상이지만 (흰색) 다른 일부 요소에서는 그렇지 않습니다 (그림). , 다른 bg 색상 블록). 불행히도 :outside, :before(2) and :after(2)이 작동하지 않는 것 같습니다.

그래서 내가 어떻게 (GIF, PNG 또는 일부 span를 추가하지 않고) 투명 모서리 CSS에서 다음과 같은 메뉴를 만들 수 있을까?

> Fiddle demo

HTML 내가 다른 시스템과 그것을 위해 만든 가장, 하단 왼쪽 투명 코너와를 만든 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;} 

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

왼쪽 상단의 흰색 테두리, 나는 표시되고 싶지 않다 : 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/