<h1 name="CSSPOINT">CSSSPOINT</h1>
body {
	margin: 0;
	padding: 0;
	background: #262626;
}
h1 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	text-transform: uppercase;
	transform: translate(-50%, -50%);
	color: transparent;
	font-family: "arial black";
	font-size: 5em;
}
h1:before, h1:after {
	content: attr(name);
	color: #eb2f06;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	transition: .3s;
}
h1:before {
	-webkit-clip-path: polygon(55% 0, 0 0, 0 100%, 35% 100%);
	clip-path: polygon(55% 0, 0 0, 0 100%, 35% 100%);
}
h1:after {
	-webkit-clip-path: polygon(55% 0, 100% 0, 100% 100%, 35% 100%);
}
h1:hover:before {
	top: -5px;
	left: -10px;
	transform: rotate(-5deg);
}
h1:hover:after {
	top: 5px;
	left: 10px;
	transform: rotate(5deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.