TyBourque TyBourque - 22 days ago 5
CSS Question

Bordered CSS card with cut out in top right

I need to have a div with a gray border around the outside of 20px. I also need to have a cut out in the top right of the div. the border in the top left must be the same as the rest of the border, it needs to be 20px. The cut out also needs to be transparent.

here is my best try at this:

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


any idea on how to easily do this?
enter image description here

Answer

You can easily do this using a :before pseudo-element and some gradients:

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>