Posted By

michaelx on 10/05/11


Tagged


Versions (?)

Pure CSS 3D ribbon


 / Published in: CSS
 

URL: http://jameskoster.co.uk/blog/pure-css-3d-ribbon/

  1. <p class="ribbon">
  2. <strong class="ribbon-content">Everybody loves ribbons</strong>
  3. </p>
  4.  
  5. .ribbon {
  6. font-size: 16px !important;
  7. /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
  8.  
  9. position: relative;
  10. background: #ba89b6;
  11. color: #fff;
  12. text-align: center;
  13. padding: 1em 2em; /* Adjust to suit */
  14. margin: 0 0 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
  15. }
  16. .ribbon:before, .ribbon:after {
  17. content: "";
  18. position: absolute;
  19. display: block;
  20. bottom: -1em;
  21. border: 1.5em solid #986794;
  22. z-index: -1;
  23. }
  24. .ribbon:before {
  25. left: -2em;
  26. border-right-width: 1.5em;
  27. border-left-color: transparent;
  28. }
  29. .ribbon:after {
  30. right: -2em;
  31. border-left-width: 1.5em;
  32. border-right-color: transparent;
  33. }
  34. .ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
  35. content: "";
  36. position: absolute;
  37. display: block;
  38. border-style: solid;
  39. border-color: #804f7c transparent transparent transparent;
  40. bottom: -1em;
  41. }
  42. .ribbon .ribbon-content:before {
  43. left: 0;
  44. border-width: 1em 0 0 1em;
  45. }
  46. .ribbon .ribbon-content:after {
  47. right: 0;
  48. border-width: 1em 1em 0 0;
  49. }

Report this snippet  

You need to login to post a comment.