<div class="block">
		<div class="corner" style="transform: rotate(270deg); top: -40px; left: -40px;"></div>
		<div class="corner" style="transform: rotate(180deg); bottom: -40px; left: -40px;"></div>
		<div class="corner" style="transform: rotate(90deg); bottom: -40px; right: -40px;"></div>
		<div class="corner" style="transform: rotate(0deg); top: -40px; right: -40px;"></div>
	</div>
* { box-sizing: border-box; margin: 0px; padding: 0px; }
.block {
		width: 200px;
		height: 100px;
		background-color: #fff;
		position: relative;
		border: 1px solid black;
		margin: 40px;
	}
	
	.corner {
		display: block;
		width: 40px;
		height: 40px;
		background-color: #fff;
		position: absolute;
	}
	.corner:before  {
		position: absolute;
		content: '';
		width: 30px;
		height: 30px;
		left: 0;
		top: 5px;
		border-left: 1px solid black;
	}
	.corner:after  {
		position: absolute;
		content: '';
		width: 30px;
		height: 30px;
		bottom: 0;
		right: 5px;
		border-bottom: 1px solid black;
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.