接壤CSS卡在右上角

Question

切出我需要有一個div周圍20像素外側的灰色邊框。我也需要在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>