You could use linear-gradient. Let's say the parent div had a background image, and you needed a div to sit on top of that with a gray background and a dog-eared left corner. You could do something like this:

.parent-div { background: url('/image.jpg'); }
.child-div { 
   background: #333;
   background: linear-gradient(135deg, transparent 30px, #333 0);
}

See it on CodePen

Further reading:

• CSS Gradients on CSS-Tricks
• Beveled corners & negative border-radius with CSS3 gradients

You could use linear-gradient. Let's say the parent div had a background image, and you needed a div to sit on top of that with a gray background and a dog-eared left corner. You could do something like this:

.parent-div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.child-div {
  height: 100px;
  width: 100px;
  background: black;
  background: linear-gradient(135deg, transparent 10px, black 0);
  opacity: .6;
}

<div class="parent-div">
  <div class="child-div"></div>
</div>

Further reading:

• CSS Gradients on CSS-Tricks
• Beveled corners & negative border-radius with CSS3 gradients

You could use a linear-gradient. Let's say the parent div had a background image, and you needed a div to sit on top of that with a gray background and a dog-eared left corner. You could do something like this:

.parent-div { background: url('/image.jpg'); }
.child-div { 
   background: #333;
   background: linear-gradient(135deg, transparent 30px, #333 0);
}

http://css-tricks.com/css3-gradients/

http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

You could use linear-gradient. Let's say the parent div had a background image, and you needed a div to sit on top of that with a gray background and a dog-eared left corner. You could do something like this:

.parent-div { background: url('/image.jpg'); }
.child-div { 
   background: #333;
   background: linear-gradient(135deg, transparent 30px, #333 0);
}

See it on CodePen

Further reading:

• CSS Gradients on CSS-Tricks
• Beveled corners & negative border-radius with CSS3 gradients