Slashed CSS Effect

CSS Code

html,
body {
  height: 100%;
  overflow: hidden;
}
body {
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
  background: -webkit-radial-gradient(center, #dc143c, #580818);
  background: -moz-radial-gradient(center, #dc143c, #580818);
  background: -o-radial-gradient(center, #dc143c, #580818);
  background: -ms-radial-gradient(center, #dc143c, #580818);
  background: radial-gradient(center, #dc143c, #580818);
}
.slashed {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
.slashed .top,
.slashed .bot {
  text-align: center;
  font: 62px/100px arial;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  color: #fff;
}
.slashed .top:before,
.slashed .bot:before {
  content: attr(title);
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
}
.slashed .top {
  position: absolute;
  top: 0;
  left: 5px;
  right: 0;
  bottom: 50%;
}
.slashed .top:before {
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
}
.slashed .bot {
  position: absolute;
  top: 50%;
  left: 0;
  right: 5px;
  bottom: 0;
}
.slashed .bot:before {
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
}

HTML Code

<div class="slashed">
  <div title="Slashed" class="top"></div>
  <div title="Slashed" class="bot"></div>
</div>

LIVE PREVIEW

See the Pen CSS Gallery - Slashed Effect by Peternak Blog (@peternakblog) on CodePen.

Credit: Robert Messerle