Slicing your page

If you follow my work, then you know I’ve been encouraging designers to break up our old stale layouts for years now.

Box. Box. Box.

We can stop using rectangular boxes for everything. We’ve got several things in our CSS toolkit to get away from the rectangles. CSS Shapes. Clip-path. Transform. Masks. But how do these work exactly? What’s possible and what’s kinda still not?

This morning I ran into an article by Kilian Valkhof debating the best way to slice a diagonal across the page, Sloped edges with consistent angle in CSS.

It’s a pretty-great walk-through of the options in CSS for creating a big diagonal line across the page. He does point out that the best solution is unworkable because Firefox doesn’t yet support basic shapes for clip-path — you have to use an SVG. (Which he then explains how to do).

Luckily, we’ve been working on full clip-path support at Mozilla. It currently works in Firefox Nightly, and will hopefully ship in Firefox 53, in mid-April 2017.


Kilian recommends using this code to isolate his Firefox-only code from other browsers.

Referencing this file in your CSS looks like this:
@-moz-document url-prefix() {
header {
clip-path: url(path/to/yoursvgfile.svg#header)

The @moz-document is a cheat to prevent the rule from being applied in other browsers.

The trouble with this is that once Firefox ships support for shapes in clip-path, this code will be a problem. Rather than targeting Firefox, it’s better to target the feature, or lack of support for that feature, using a Feature Query.