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.
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.