EXAMPLE
Run 
<!DOCTYPE html>
<html>

<head>
	<title>clip-path property in CSS</title>
	<style type="text/css">
		.clip-borders {
		  width: 100px;
		  height: 100px;
		  background-color: #639;
		  background: rebeccaPurple;
		  border: 4px solid #222;
		  margin: 0 auto;
		  -webkit-clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
		  clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
		  -webkit-clip-path: url("#rhomboid-clip");
		  clip-path: url("#rhomboid-clip");
		}
		
		.clip-borders:hover {
		  -webkit-clip-path: none;
		  clip-path: none;
		}
	</style>
</head>

<body>
	<div class="clip-borders"></div>
	<svg class="clip-svg">
		<defs>
			<clipPath id="rhomboid-clip" clipPathUnits="objectBoundingBox">
				<polygon points="0 1, 0.3 0, 1 0, 0.7 1" />
			</clipPath>
		</defs>
	</svg>
</body>

</html>