As I’ve shown previously, it’s completely possible to create an angled navigation using CSS transforms. As part of her new book, Lea Verou shows how to take that idea even further to create diamond frames for images. Inspired by that work, I created the navigation you see above: a series of active links, arranged in a pattern like a chain-link fence.

Images As Diamonds

The central idea of the image diamond frame is fairly straightforward: I’d recommend reading Lea’s book for a complete (and more accurate) description of the method, along with further variations. Broken down into five steps, the basic technique is:

Step 1: Frame the image

Most any element will work as a frame: in the example above I’m using <a> tags to create linked images. The <a> elements are made square by making them inline-block with a set height. I’ve also made the bitmaps square for ease of use, although that isn’t required.

Step 2: Rotate the frame

The frame is turned 45°, rotating the image and any other content inside it.

Step 3: Rotate the image to compensate

The content of the frame is rotated back by the opposite amount to keep it square. That’s why I’m using <img> tags rather than background images: there is (as yet) no background-transform.

Step 4: Scale the image to fill the space

The squared-up image will not fill the diamond shape, so it is scaled up slightly to compensate.

Step 5: Remove overflow

Set overflow: hidden on the element to trim any image excess from the outside of the frame.

Chainlink Backgrounds

I wanted the three links to sit in the context of other diamond-shaped images. While it would be possible to create these using HTML and CSS, I decided to “cheat” and create it as a background image using PhotoShop.

This simplified the markup for the gender-normative demo:

<div id="pure-container">
	<a href="#" id="woman"><img src="woman.jpg" alt><span>Women</span></a>
	<a href="#" id="man"><img src="man.jpg" alt><span>Men</span></a>
	<a href="#" id="child"><img src="child.jpg" alt><span>Children</span></a>
</div>

Due to the fact that the links would be absolutely positioned, the pure-container had to be padded out. The complete CSS:

#pure-container { 
	background: url(mesh-grid-background-2x.jpg);
	position: relative;
	padding-top: 68%;
	background-size: cover;
	overflow: hidden;
	}
#pure-container a { 
	display: inline-block;
	position: absolute;
	width: 33%;
	height: 48.4%;
	transform: rotate(45deg);
	top: 0; 
	overflow: hidden;
	opacity: 0.5;
	transition: .6s opacity;
	color: #fff;
	font-family: Avenir, sans-serif;
	text-transform: uppercase;
	letter-spacing: .2rem;
	font-size: .5rem;
	text-shadow: 0 0 5px rgba(0,0,0,0.4);
	} 
#pure-container a:hover, #pure-container a.highlighted { 
	opacity: 1;
}
#pure-container a span { 
	display: inline-block;
	transform: rotate(-45deg);
	position: relative;
	z-index: 5;
	text-align: center;
	width: 100%;
	left: 25%;
	top: -36%;
	font-size: 2rem;
}
#pure-container a img { 
	width: 100%;
	transform: rotate(-45deg) scale(1.4);
}

As I mentioned, each link must be positioned absolutely, using relative units so that the entire design remains responsive:

a#woman {
	margin-top: 3.2%;
	left: 34.4%;
}
a#man {
	margin-top: 26.4%;
	left: 11%;
}
a#child {
	left: 57.8%;
	margin-top: 26.5%;
}

There’s also some media queries to tidy up the presentation at smaller screen sizes; you can inspect that on the CodePen demo.

Photographs by Sarah Zeghraba, Yuri Samoilov, Christian Beyer, Cay Os, Philippe Manguin and Mohandoss Sampath, licensed under Creative Commons.

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/waMpEK