Advanced Search

CSS folded-corner effect

/ Published in: CSS
Save to your folder(s)
An idea of Nicolas Gallagher : pure CSS folded corner.
To apply this, you simply have to create a element with the CSS class "note"

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .note { 
  2.   position:relative; 
  3.   width:30%; 
  4.   padding:1em 1.5em; 
  5.   margin:2em auto; 
  6.   color:#fff; 
  7.   background:#97C02F; 
  8.   overflow:hidden; 
  9. } 
  10.  
  11. .note:before { 
  12.   content:""; 
  13.   position:absolute; 
  14.   top:0; right:0; 
  15.   border-width:0 16px 16px 0; 
  16.   border-style:solid; 
  17.   border-color:#fff #fff #658E15 #658E15; 
  18.   background:#658E15; 
  19.   -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  20.   -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  21.   box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  22.   display:block; 
  23.   width:0; /* Firefox 3.0 damage limitation */ 
  24.   } 
  25.  
  26. .note.rounded {
  27.   -webkit-border-radius:5px; 
  28.   -moz-border-radius:5px; 
  29.   border-radius:5px; 
  30. } 
  31.  
  32. .note.rounded:before { 
  33.   border-width:8px; 
  34.   border-color:#fff #fff transparent transparent;
  35.   -webkit-border-bottom-left-radius:5px;
  36.   -moz-border-radius:0 0 0 5px;
  37.   border-radius:0 0 0 5px; 
  38. }

URL: http://nicolasgallagher.com/pure-css-folded-corner-effect/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.