CSS folded corner effect (.net)

Example code for producing a folded corner effect using CSS pseudo-elements

by marhaba

HTML

<div class="note">28</div>

<p class="more"><a href="http://nicolasgallagher.com/pure-css-folded-corner-effect/">More details and examples</a></p>

CSS

html, body, div, p {padding:0; margin:0;}
body {font:14px/1.4 Arial, sans-serif; background:#fff;}

/* CSS folded corner effect */

.note {
    position:relative;
    overflow:hidden; /* hides part of the box-shadow */
    color:#fff;
    background:#97C02F;
    height:26px;
    width:42px;
    text-align:center;
    padding-top:8px;
}

.note:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 10px 10px 0;
    border-style:solid;
    border-color:#658E15 #fff;
    /* css3 extras */
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), 
                      -1px 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), 
                      -1px 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.3), 
                      -1px 1px 1px rgba(0,0,0,0.2);
}

.more {
    text-align:center;
}

JavaScript

/*

NOTES:

- The right-border colour for the pseudo-element in this example
  is set to match the background colour of the container element.
  In this case, the <body> element.

*/