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"


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.