Posted By

robnilas on 01/21/17


Tagged

CSS-3D-ribbon


Versions (?)

CSS 3D ribbon


 / Published in: CSS
 

  1. .ribbon {
  2. font-size: 16px !important;
  3. /* 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 */
  4.  
  5. position: relative;
  6. background: #ba89b6;
  7. color: #fff;
  8. text-align: center;
  9. padding: 1em 2em; /* Adjust to suit */
  10. 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. */
  11. }
  12. .ribbon:before, .ribbon:after {
  13. content: "";
  14. position: absolute;
  15. display: block;
  16. bottom: -1em;
  17. border: 1.5em solid #986794;
  18. z-index: -1;
  19. }
  20. .ribbon:before {
  21. left: -2em;
  22. border-right-width: 1.5em;
  23. border-left-color: transparent;
  24. }
  25. .ribbon:after {
  26. right: -2em;
  27. border-left-width: 1.5em;
  28. border-right-color: transparent;
  29. }
  30. .ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
  31. content: "";
  32. position: absolute;
  33. display: block;
  34. border-style: solid;
  35. border-color: #804f7c transparent transparent transparent;
  36. bottom: -1em;
  37. }
  38. .ribbon .ribbon-content:before {
  39. left: 0;
  40. border-width: 1em 0 0 1em;
  41. }
  42. .ribbon .ribbon-content:after {
  43. right: 0;
  44. border-width: 1em 1em 0 0;
  45. }

Report this snippet  

You need to login to post a comment.