Creating a transparent inner notch?

Creating a transparent inner notch?

I know how to create a notch on the outside like:
div:after {
content: '';
display: block;
width: 20px;
height: 20px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
But I can't figure out how to solve this thingy using CSS only:

The notch has to be inside of the container and it has to be transparent.
So the above solution or an image won't solve it.
Maybe this can be created using SVG?
As I don't have any clue at the moment I can't add exta markup or styles.