Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Creative Box Corners

The first of three little design tricks makes it look like the corner of a content container has been “knocked out” or clipped. No images are using in this design technique, plus it's responsive.

A few ways you might use this idea:

• Use it for a Q & A. Use a box with the "Q" for the question, and another box with an "A" for the answer, perhaps slightly varying the color scheme as well.
• Move the "knockout" to the bottom right and use the main part for an article teaser and the knockout for a "More…" link to the rest of the story.
• Instead of a letter in the knockout area, use a small graphic related to the content in the main area. For example, if you wrote a story about search engines you might put a small magnifying glass in the corner.
• Place a small graphic in the knockout area and link it to the place you describe in the main box area. For example, if you had a craft site you could link an image of a candle to the candle making part of your site, or a paint palette to a section about painting, and so forth; while using the main box to describe the content they'll find if the click the link. If I did this I'd also make a text link at the end of the desciption for folks who don't realize the image in the corner is a link.
• Float it to one side and use to insert colorful pull quotes into your content. Use the first letter of the quote as the letter in the corner box, or use an image related to the quote.

The HTML is very simple for this:

<div class="knockoutBox">
<div class="knockoutInsert">
Q
</div>
<div class="knockoutPad">
Your message goes here...
</div></div>

Line 1 is the container for everything. I gave this division a class name of knockoutBox.

Line 2-4 is the second division, called knockoutInsert, which is the corner knockout with the letter "Q" inside.

Line 5 opens another division called knockoutPad. This is used for padding to keep the text away from the edges of the colored borders.

Line 7 closes the two remaining open divisions.

Next comes the CSS. There are three parts to it in the external style sheet:

div.knockoutBox {
  background-color: burlywood;
  max-width: 640px;}

div.knockoutInsert {
  float: left; 
  font-size: 55px;
  font-weight: bold;  
  padding: 10px 20px;
  background-color: #586F89; 
  color: white; 
  border: 1px solid #fff; 
  border-width: 0 12px 12px 0; 
  margin-right: 11px;
  margin-bottom:11px;}

div.knockoutPad {padding: 11px;}

The first chunk of code (lines1-3) is the container division. All that's done here is to set the background color and maximum container width. The height will expand or contract with the content.

The second chunk of code creates the box in the corner, the one with the letter "Q" in it. After that...

Line 13 comes later in the code so it will take priority. That means the border style (solid) and color (white) will remain the same, but the border width will be changed. The border on the top and left will be zero, and the right and button will be 12 pixels wide.

I could have written a separate line of code for each border, but it’s actually two less lines of code to do it this way.

The border color needs to be the same as the background color of the space where it’s used. This gives the illusion of the corner being knocked out and the other box sitting in it’s place.

Once you set this up and add text, you might find the gap between the text where it wraps back under the knockout insert, and the knockout insert itself, is too large. The easiest way to fix that is to adjust the size of the knockout insert (the floating division); but you can also change the width of the containing element, or the paragraph placement, or even the wording.

Don't let the space limitations here limit your thinking, there are many other ways to style the knockout area. You might want to experiment with the border width, styles, and colors, try multiple knockout areas, play around with images and background images, shadows and so forth.

To spark your imagination, here’s one I created that looks like it has a folded corner. The corner isn't an image, it’s CSS. So is the shadow.

First, here's the legal pad paper background if you want it. →

Believe it or not, the code for this is very similar to the previous example, so I’m only going to explain the main differences. Here’s the HTML:

That's nearly the same as before, only with different class names. The main difference is the second division isn't a "knockout" like before, it's the folded corner with a drop shadow, thus the name, noteShadow.

Here’s the CSS:

div.note {
  background-image: url(images/legalPaperBG.jpg);
  max-width: 300px;
  margin: 18px;
  border-right: 1px solid #E4D26B; 
  border-bottom: 1px solid #E4D26B;
  font-family: "Comix Sans MS", cursive;
  font-size:18px;}

div.notePad {
  padding: 5px 8px;}

div.notePad > p {
  color: blue;
  font-style: italic; 
  margin-bottom: 23px;
  line-height: 23px;}

#corner {
  float: left;
  width: 0 ;
  height: 0;
  border-bottom: 60px solid #ECE48C;
  border-left: 55px solid #fff;
  margin-right :12px;}

.noteShadow {
  -webkit-box-shadow: #555 5px 5px 5px;
  -moz-box-shadow: #555 5px 5px 5px;
  box-shadow: #bbb 4px 4px 5px;}

The Main Differences

Line 17 changes the default line height (the space between lines of text) to line up the text on the blue lines of "legal paper." You may need to adjust this, or the margin in line 16, depending on the font used and the default line height. Or, you could remove lines 16 & 17 and let the text fall where it may. A lot of folks don't color between the lines.

Lines 20 – 27 create the folded corner. Notice the width and height are set to zero, but two of the the borders are set quite large. That's what makes the corner "fold" over.

Lines 29 – 33 create the drop shadow under the fold.

And then I used a common cursive font for a backup, but used a Google font to give the text a handwritten look that fits in nicely with the legal paper style background. If needed, there's font family tutorial that includes a section about using Google fonts. I coded the Google font into the "notePad" division using an inline style. If needed, there's a style sheets tutorial that explains inline, embedded, and external styles.

How about that . . . a little creativity from my little "corner" of the world.