Anatomy of a Border: a Saul Bass Demo

Christopher Kennedy-Nuñez — Fri, 31 Jan 2020 08:58:30 +0000

I’m in the process of redesigning my website and I was about to do yet another layout using geometric fonts and rounded edges when a friend of mine said that I’m a person that loves modern aesthetics but also enjoy objects with personality and attitude. He suggested that I look at Saul Bass’s work, most notably the artwork for Anatomy of a Murder. The edges of the boxes had a wonderfully geometric yet “broken” quality that I wanted to see if I could emulate with CSS clipping paths.

The challenge at first for me was that creating the clipping paths required percentages in order to have the path scale. At first I thought the only way to get around this would be to create an SVG file and reference it in the CSS, but quickly realized I could just use the calc() function to subtract a defined unit of measurement from the edge of the right and bottom edges of the div.

Now that I have my proof of concept, my next step is creating a Sketch file to start planning my actual website in this style!

DEV Community: Christopher Kennedy-Nuñez

Anatomy of a Border: a Saul Bass Demo