<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Tours</a>
<a href="#">Contact</a>
</nav>
@font-face { 
  font-family: Impact Label;
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/Impact_Label.woff');
  font-weight: normal;
  font-style: normal; 
}
body { background: #777;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/scuffed-background-image_1.jpg);
  background-size: cover;
}
nav { text-align: center; }
nav a { 
  font-family: Impact Label, sans-serif; 
  font-size: 200%;
  color: #323;
  background: white;
  display: inline-block;
  margin: 1.1em;
  border: .5em solid #323;
  position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,0.3);
  border-radius: 3px;
}
nav a:nth-child(odd) { 
  margin-top: 1em;
  transform: rotate(-4deg);
}
nav a:nth-child(even) { 
  margin-top: .8em;
  transform: rotate(4deg);
}
nav a:nth-child(4n) { 
  margin-top: -.8em;
  transform: rotate(2deg);
}
nav a:nth-child(even):before {
  content: "";
  position: absolute;
  top: -.5em;
  right: -.5em;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #bbb #222;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js