Corners!

Sometimes the simplest looking things take the longest amount of time

 

I needed to frame a restaurants menu in a box that had an image in each box that made it look like a page from an old time paper and cardboard photo album page.  The kind used four of those paper “corner protectors” to hold a photo to the paper so that the paper of the photo wouldn’t be damaged by glues.
As often is the case with the internet and webdesign tutorials, there were lots of articles on how to do this on the internet.  But as it sometimes is the case, none of them worked. I’ve run into this before.  there’s nothing to do but keep the timeclock turn off and invent your own four corner box.  It needed these features:

• Four corner images, duh
• The box needed to be responsive (changed size to fit any screen size)
• The box needed to be flexible enough to fit in any size container and hold any amount of content
• The box needed to mesh well with any HTML/CSS/JavaScript/jQuery framework that was already in place

Here’s the embedded CodePen:

See the Pen Four Corners in a Box by Texx Smith (@texxs) on CodePen.

---

Or just use this link to view/fork/share it from CodePen:
View On CodePen