Stop Using Corner Banners

Written on May 2, 2014

Once in a while I come across a site that uses a corner banner to link elsewhere. This is a problem. Depending on the size of my browser, the banner will get in the way of my interaction with the site.

Shows how image based banners interfere content

I want to click the DOCS button but I can’t because the GitHub banner is in the way. Not cool…

The reason why this happens, is that graphic is bound to a square space. Although the graphic is just a banner, the graphic that encases the banner has a bounding box that takes up space to the furthest pixels.

A quick solution I thought up was just styling a link element and rotating it with some CSS. I’ve also created a GitHub repo that shares a pure CSS solution.

Stay in touch

Thanks for reading this article. I'd love to stay in touch and share articles like this one in your inbox. Sign up for my newsletter.