css - パースペクティブ効果のために境界線の透明なコーナーを作成する方法は?

Question

既存のウェブサイトの新しいデザインを作成しているので、「視点」でいくつかの要素を描画する必要があります。

いくつか:beforeの:after疑似要素を使用することで簡単に作成できましたが、追加されたコーナーは固定色 (白) で、背景 (白) では問題ありませんが、他の要素 (写真、他の背景色ブロック) では問題ありません。 . 残念ながら:outside、うまく:before(2)いか :after(2)ないようです。

CSSでは、次のメニューを透明なコーナー (gif、png、またはいくつかの追加なし)で作成するにはどうすればよいspanですか?

> フィドルのデモ

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;}

私が別のシステムで作った最高のものは、表示されたくない左下の透明なコーナーと左上の白い境界線を作成しました: 2番目のフィドルデモ

どんな助けでも大歓迎です。