右上に切り抜かれた枠線付きCSSカード

Question

20pxの外側を囲む灰色の枠線を持つdivが必要です。私はまた、divの右上にカットアウトが必要です。左上のボーダーはボーダーの残りのボーダーと同じでなければならず、20pxにする必要があります。カットアウトも透明である必要があります。簡単にこれを行う方法上の任意のアイデア

http://jsfiddle.net/tybourque/2bZAW/5959/

.card-cutout:before { 
content: ''; 
position: absolute; 
top: -20px; 
right: -80px; 
border-top: 80px solid transparent; 
border-left: 80px solid #828282; 
width: 0; 
z-index: 10; 
} 
.card-cutout:after { 
content: ''; 
position: absolute; 
top: 0px; 
right: -62px; 
border-top: 65px solid transparent; 
border-left: 62px solid white; 
width: 0; 
z-index: 11; 
} 

：ここ

が、この時私の最高の試みているのですか？

Answer 1

あなたが簡単は:before擬似要素といくつかの勾配を使用してこれを行うことができます。

html, body { 
 
    background: #000; 
 
} 
 

 
div { 
 
    background: #fff; 
 
    border: 20px solid #aaa; 
 
    height: 150px; 
 
    margin: 20px auto; 
 
    position: relative; 
 
    width: 90%; 
 
} 
 

 
div:before { 
 
    background: linear-gradient(45deg, #fff 38%, #aaa 38%, #aaa 56%, #000 57%); 
 
    content: ""; 
 
    display: block; 
 
    height: 80px; 
 
    position: absolute; 
 
    right: -20px; 
 
    top: -20px; 
 
    width: 80px; 
 
}

<div></div>

あなたが擬似要素になっているはずです