Advanced Search

Return to Snippet

Revision: 37712
at December 15, 2010 17:56 by arnaudbrousseau
Initial Code 
.note { 
  position:relative; 
  width:30%; 
  padding:1em 1.5em; 
  margin:2em auto; 
  color:#fff; 
  background:#97C02F; 
  overflow:hidden; 
} 

.note:before { 
  content:""; 
  position:absolute; 
  top:0; right:0; 
  border-width:0 16px 16px 0; 
  border-style:solid; 
  border-color:#fff #fff #658E15 #658E15; 
  background:#658E15; 
  -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);
  display:block; 
  width:0; /* Firefox 3.0 damage limitation */ 
  } 

.note.rounded {
  -webkit-border-radius:5px; 
  -moz-border-radius:5px; 
  border-radius:5px; 
} 

.note.rounded:before { 
  border-width:8px; 
  border-color:#fff #fff transparent transparent;
  -webkit-border-bottom-left-radius:5px;
  -moz-border-radius:0 0 0 5px;
  border-radius:0 0 0 5px; 
}
Initial URL 
http://nicolasgallagher.com/pure-css-folded-corner-effect/
Initial Description 
An idea of Nicolas Gallagher : pure CSS folded corner.
To apply this, you simply have to create a <div> element with the CSS class "note"
Initial Title 
CSS folded-corner effect
Initial Tags 
css
Initial Language 
CSS