clip-path test

by phloe

HTML

<div class="block">
	<a class="link" href="#"><div class="clipped">
	
	</div></a>
</div>

CSS

.block {
	width: 300px;
	min-height: 500px;
	background-color: magenta;
	display: flex;
	flex-flow: column;
}
.link {
	display: block;
	flex: 0 0 auto; 
}
.clipped {
	clip-path: polygon(0 40px, 40px 40px, 40px 0, 100% 0, 100% 100%, 0 100%);
	min-height: 200px;
	background-color: #000;
}