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.

See the Pen Stop Using Corner Banners by Michael Lee (@michaellee) on CodePen.

Stay in touch

Thanks for reading this article. I'd love to stay in touch and share more tips on programming and side projects with you. Sign up and I'll send you my articles straight to your email, you'll also get a free copy of the light themed version of my Git cheat sheet.
Git cheat sheet preview image