<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;
}
This Pen doesn't use any external CSS resources.