带边框的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伪元素和一些渐变轻松执行此操作：

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;