Skewed full width menu with scss

index.html

<ul>
  <li><a href="#">First item</a></li>
  <li><a href="#">other item</a></li>
  <li><a href="#">and...</a></li>
  <li><a href="#">last item!</a></li>
</ul>

Skewed full width menu with scss.markdown

Skewed full width menu with scss

A Pen by Hans Spieß on CodePen.

License.

style.css

$height: 200;      // default: height of menu
$skew-angle: 50;   // default: angle

@import "compass"; // import compass for easier math functions: http://compass-style.org/reference/compass/helpers/math/#tan

$skew-deg: $skew-angle * 1deg;   // attach deg unit to force calculation as degree units
$a: tan( $skew-deg ) * $height;  // calculate opposite leg of triangle

body {
  margin: 0;
  padding: 0;
  font: normal small-caps normal 18px/150% Arial, Helvetica, sans-serif;
}

ul {
  width: 100%;
  display: flex;
  overflow: hidden; // prevent vertical scrollbar
  margin: 0;
  padding: 0;
  list-style: none;   
  li {
    flex: 1 auto; // distribute children to container size
    -webkit-transform: skew( $skew-angle * -1deg );
    overflow: hidden; // hide overlapping links with negative margins
    margin: auto;
    margin-left: -1px; // compensate rendering issues
    &:first-child {
      margin-left: $a / 2 * -1px; // negative margins to compensate 
    }
    &:last-child {
      margin-right: $a / 2 * -1px;
    }
    a {
      display: block;
      -webkit-transform: skew( $skew-angle * 1deg );
      margin: 0  $skew-angle / 2 * -1em;
      padding: 0  $skew-angle / 2 * 1em;
      line-height: $height * 1px;
      background: red;
      color: #FFF;
      text-align: center;
      text-decoration: none;
      &:hover {
        color: red;
        background-color: #e2e2e2;
      }
    }
  }
}