接壤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>