Parallelogram-looking blocks

gistfile1.txt

<ul class="skew">
  <li><a href="#">Test</a>
  </li>
  <li><a href="#">Test 2</a>
  </li>
</ul>

.skew {
  overflow: hidden;
  width: 100%;
  margin: 0px;
  padding: 0px;
  padding-left: 10px;
}
.skew li {
  list-style-type: none;
  float: left;
  margin-right: 2px;
  transform: skewX(-15deg);
  width: auto;
  margin: 0px;
  padding: 0px;
}
.skew li:before {
  content: '';
  position: absolute;
  left: 0%;
  top: -100%;
  display: block;
  width: 100%;
  height: 100%;
  background: red;
  transition: top 150ms;
}
.skew li a {
  display: inline-block;
  padding: 10px;
  color: #000;
  text-decoration: none;
  transform: skewX(15deg);
  transition: color 150ms;
}
.skew li:hover:before {
  top: 0%;
}
.skew li:hover a {
  color: #fff;
}