Picture of Michael Lee
:wave: Hey hey, I'm @michaelsoolee! I'm a full-stack developer, maker of one too many side projects and dad.

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, design and side projects with you. Sign up and I'll send you my articles straight to your email.
Previous post: Sass Directives and Maps
Next post: Native Haus