Sign Up

I found a recent discussion on Reddit’s r/webdev interesting: how might one make a container appear to have a slanted bottom border, as shown above? The top-voted answer, while clever, only worked on fixed-width containers, and used a lot of to achieve the effect; by sacrificing a small amount of backwards compatibility, I think there’s a better option.

This mini-lesson might be considered part of a push to re-imagine website layout: for the longest time we’ve been reliant on three-column grids and 90° angles. But with a little imagination, we can do so much more:

The Element Inspector in desktop Safari communicating with and modifying a page in Mobile Safari in real time

When they work with mobile for the first time many designer-developers assume that page changes must be uploaded to a server before they can be seen on a mobile device. This makes for extremely drawn-out troubleshooting: fixes for mobile are guessed at, coded, uploaded, and the mobile browser refreshed, wit this process repeated dozens of times until the problem is solved.

Thankfully, there's a much better and more streamlined way, if you have a Mac and an iDevice (iPhone, iPad, etc).