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!
Top comments (0)