JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">

	</div>

CSS

.block {
	background-color: red;
	height: 200px;
	width: 300px;
	position: relative;
}

.block::before {
	content: '';
	position: absolute;
	left: 0;
	border-top: 30px solid white;
  border-right: 30px solid transparent;
}

.block:hover {
	box-shadow: inset 0 0 0 2px black;
}

.block:hover::after {
  content: '';
	position: absolute;
	left: 0;
	width: 30px;
  height: 30px;
  background: linear-gradient(-45deg,
    transparent, transparent 50%,
    black 50%, black 53%,
    transparent 53%, transparent);
}