Creating folded ribbons edges with CSS

While working on tweaking a notification box design, I wanted to include the element’s heading in a folded ribbon element. I also wanted to avoid using any images and just use CSS. Mostly to try my hand at using generated content and some CSS that I don’t normally get to use.

The basic HTML for all the following example is:

Show Plain Text
  1. <div class="admonition">
  2.     <div class="admonition-title">Note</div>
  3.     <p>The content goes here</p>
  4. </div>

Creating the heading

First I needed to style the box and position the heading element:

Show Plain Text
  1. .admonition {
  2.     position: relative;
  3.     padding: 23px 10px 22px;
  4.     margin: 20px;
  5.     background: #fffdf2;
  6.     border: 2px solid #ffcb00;
  7.     font-family: Helvetica, Arial;
  8. }
  9. .admonition-title {
  10.     position: absolute;
  11.     top: -10px;
  12.     left: -10px;
  13.     padding: 4px 8px;
  14.     background: #df9c00;
  15.     color: #fff;
  16. }

This creates elements that look like:

The container box needs to have relative positioning as all the heading and fold element will need to be positioned.

Adding the fold and other effects

Now I need to add the folded element that sits ‘behind’ the heading. Since the fold will be a triangle, I can use border tricks to create a triangle and apply that to an :after pseudo element. I’ll also add some shadows for additional depth:

Show Plain Text
  1. .admonition {
  2.     position: relative;
  3.     padding: 23px 10px 22px;
  4.     margin: 20px;
  5.     background: #fffdf2;
  6.     border: 2px solid #ffcb00;
  7.     font-family: Helvetica, Arial;
  8. }
  9. .admonition-title {
  10.     position: absolute;
  11.     top: -10px;
  12.     left: -10px;
  13.     padding: 4px 8px;
  14.     background: #df9c00;
  15.     color: #fff;
  16.     -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  17.     -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  18.     box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  19. }
  20. .admonition-title:after {
  21.     content: '';
  22.     display: block;
  23.     height: 20px;
  24.     width: 8px;
  25.     position: absolute;
  26.     top: 24px;
  27.     left: 0px;
  28.     background: transparent;
  29.     z-index: -1;
  30.     border-top: 45px solid #eed993;
  31.     border-left: 45px solid transparent;
  32. }

This creates the illusion of a folded sheet behind the heading. Its also interesting that you can create any any triangular shape by combining solid and transparent borders. A really nice benefit of this effect is it degrades well in older browsers. Browsers that don’t support box-shadow or pseudo elements get a slightly less sexy result, but they can still access and use the content.

I’ve put an example up on jsfiddle . I’m sure I’m not the first person to figure this out, but I thought it was an interesting way to create an effect with CSS, that previously would have required images.

Comments

Nice little trick, Mark. I’m going to put it to use on a site I’m working on.

A side note: if you use

border-left: 45px outset transparent;

instead of ‘solid’, it will get rid of that pesky faint dotted line that Firefox adds.

Jeremy on 8/29/11

keep doing this ,i am gonna use your trick

dex on 8/30/11

Very short code. Surprised.

Victor on 9/10/11

awesome stuff, man.

Hugo on 12/19/11

this doesn’t seem to work when placed inside of a div that has a background color applied. (body color is dark, and page-wrap is white)

Any idea why?

barbara on 1/3/12

Comments are not open at this time.