JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cornered-box">
	<div class="svg-cont">
		<svg width="200px" height="200px" viewBox="635 375 202 202" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			<defs>
				<polygon id="path-1" points="675.163277 376 836 376 836 535.221624 796.221624 575 636 575 636 414.163277"></polygon>
			</defs>
			<use stroke="#000000" stroke-width="2" fill="transparent" xlink:href="#path-1"></use>
		</svg>
	</div>
	<div class="cornered-box-content">
		<p>
			Some content for the box
		</p>
	</div>
</div>

CSS

body{
	padding:40px;
}
.cornered-box{
	height:200px;
	width:200px;
	position: relative;
	padding:20px 5px;
	box-sizing:border-box;
}
.cornered-box .svg-cont{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:-1;
}
.cornered-box .svg-cont svg{
	height:100%;
	width:100%;
}
.cornered-box .svg-cont svg use{
	transition: fill 0.2s ease-in-out;
}
.cornered-box:hover .svg-cont svg use{
	fill:#F00;
}