Advanced Search

Pure CSS 3D ribbon

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.