Most websites have strong rectangular orientation. Those that don’t tend to be extremely image-heavy, requiring a lot of work in PhotoShop. But with CSS, it’s possible to create a website design that is non-rectangular without using any images at all.

The Concept

I wanted a fictional rock band website to have the appearance of a group on tour: features on the page would be scuffed, scratched, improvised and off-kilter. To this end, I wanted to use an old letter-stamp style font for navigation and heading elements, evocative of the labels one might slap on an effects or sound board.

I found a free impact label font by Tension Type at dafont, then went to work on the HTML. The structure of the navigation list for the site is something that you have probably seen plenty of times before:

<nav>
	<a href="#">Home</a>
	<a href="#">About</a>
	<a href="#">Tours</a>
	<a href="#">Contact</a>
</nav>

The magic all lies in the CSS. We do two things to start:

• Embed a custom font into the web page
• Use rotate and offset the list items to give a pseudo-random appearance.

@font-face {
	font-family: Impact Label;
	src: url('Impact_Label.woff');
	font-weight: normal;
	font-style: normal;
}
body { background: #777; }
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;
	border-radius: 3px;
	box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
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);
}

A brief explanation: the code uses odd and even pseudo-class selectors to transform of alternate list items and transform them. Combined together, these produce the appearance of random orientation in the navigation.

Why take this approach to implementing the design? The primary advantage that it eliminates any requirement for PhotoShop editing: any changes to the design of the navigation – fonts, kerning, placement or orientation – can be made quickly, directly in the CSS.

In this case, the border is necessary to expand the size of the link, as the background controls the color immediately behind the text

Finally, I also add a small “corner peel” effect to half of the links:

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;
}

Note that the second color for the border is for the upper right, “outside” corner of the peeled square, and covers the color of the border.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/EDhIg