For some reason, clipped corners on UI elements is visual shorthand for “the future”. You can see the design style everywhere, especially in video games.

In the past, this clipped UI effect would be achieved on web pages through the use of static image elements, immediately limiting the flexibility and range of their application. The growing closeness of and CSS makes it possible to approach the design problem from another angle entirely.

You may be familiar with the CSS clip property, which effectively crops elements. clip is limited to rectangular shapes, but a recent addition to the spec, clip-path, allows the clipping area to take any polygonal shape. Plotted as a series of x and y coordinates, the clipping path describes the vertices of a polygon: 

clip-path: polygon(0px 0px, 245px 0px, 285px 50px, 285px 80px, 40px 80px, 0px 30px);

You could easily gain the position of these points from a drawing in Adobe Illustrator or some other vector editing program, or from an SVG illustration, from which the syntax is derived, and to which we will return in a moment.

Applying Clipping Effects

Given the following HTML: 

<nav id="futurebar">
	<a href="#"> Mathematics</a>
	<a href="#">Rocketry</a>
	<a href="#">Astronomy</a>
</nav>

…we can use the following CSS to size and clip the links: 

#futurebar a {
	display: inline-block;
	width: 285px; height: 80px;
	background-image: url(flask.jpg);  
	-webkit-clip-path: polygon(0px 0px, 245px 0px, 285px 50px, 285px 80px, 40px 80px, 0px 30px);
	font-family: Agenda-Light, sans-serif;
	text-decoration: none;
	background-position: top center;
	background-size: cover;
	font-size: 3rem; color: #fff;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

Note that the links have deliberately been made the same size as the extent of the clipping area (80 pixels tall by 285 pixels wide). They could be made smaller, but it’s important to understand that the clipping area will not “shrink to fit”: as it is implemented here, clip-path creates a mask of a fixed size.

Clipping Cross-Browser

clip-path currently requires vendor prefixes, with Webkit being the only browser rendering engine to support the property directly at the moment. Firefox and IE9+ can achieve the same result by referencing an SVG file that contains the same vertex information. At the bottom of the HTML document that contains the links, add the following: 

<svg width="0px" height="0px">
	<defs>
		<clipPath id="shape">
			<polygon points="0 0, 245 0, 285 50, 285 80, 40 80, 0 30" />
		</clipPath>
	</defs>
</svg>

Note the <defs> and <clipPath> elements, and the fact that the polygon points exactly match those given in the earlier CSS, without px suffixes. The SVG is given a width and height of 0, common when SVG is embedded as a page solely as a filter, so that the SVG element does not reserve any space for itself on the HTML page.

In the CSS declaration for the links, add the following: 

clip-path: url(#shape);

That’s it: you now have a clipping path template working across browsers that you can apply to repeated elements.

Making a Dynamic Background

To make the background “fade” dynamically, we can add markup inside the links: 

<nav id="futurebar">
	<a href="#"><span>Mathematics</span></a>
	<a href="#"><span>Rocketry</span></a>
	<a href="#"><span>Astronomy</span></a>
</nav>

And add the following to our CSS: 

#futurebar a span {
	background: rgba(0,0,0,0.4);
	display: block;
	width: 100%; height: 100%;
	transition: .8s;
	padding-top: .7rem;
	padding-left: 3rem;
}
#futurebar a:hover span {
	background: rgba(0,0,0,0);
}

Upsides & Downsides

clip-path does have a nice progressive enhancement aspect: if the browser doesn’t understand that part of the spec, the link will be shown as simply a rectangular shape. There’s just one issue, aside from the fixed dimensions of the masks: as you can see if you move your cursor to the corners of each link, the <a> element’s active “hot spot” extends to its regular rectangular area, outside the clipping path. In an interface like the one shown here, that won’t matter much, but it can be significant if the clipping shape is more extreme, such as an octagon. In that case, you’d probably want to make the interface elements entirely in SVG, where their active areas can be clipped exactly to the shape, as I show in my Interactive SVG Map example. I’ll delve deeper into those possibilities in the near future.

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