Slanted Categories

Pure CSS with category list with slanted backgrounds

by Ben Gillbanks

HTML

<a href="#"><span>Sports</span></a>
<a href="#"><span>Games</span></a>
<a href="#"><span>Music</span></a>

SCSS

body {
  padding: 2em;
  text-align: center;
}

span {
  color: #fff;
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  font-family: arial;
  letter-spacing: 0.2em;
  z-index: 1;
  position: relative;
  text-transform: uppercase;
}

a {
  position: relative;
  padding: 0.25em 0.7em;

  &:before {
    background: #555;
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: skewX(-10deg);
    transition: all 0.2s linear;
  }
  
  &:hover {
    &:before {
      background: #000;
      transition: all 0.2s linear;
    }
  }
}