Altering CCS ribbon code/style

Question

I am trying to use this ribbon code (found on some generator site) link included

I think it looks nicev however it just doesn't fit the LONG line of text I need to display in there (PAST PRESIDENT).

This is the first time I'm trying to use a CSS ribbon effect.. and can not seem to wrap my head around what params will make move it over (to the left some)..and make it longer to display the longer text I want to display.

• it's a right side justified ribbon (just to be clear).. that needs to be moved over to the left a little bit.. and made 'longer' to display longer text.

Here is my code:

/* CSS ribbon styles */
/* http://www.cssportal.com/css-ribbon-generator/ */

.ribbon {
  position: absolute;
  right: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  font-size:10px;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#2989d8 0%, #1e5799 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #1e5799;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #1e5799;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}

While I made it somewhat bigger using these updated styles..

• the font looks a little 'janky'
• I cant seem to get the before/after effects to adjust now that I have adjusted the other styles.

Updated:

.ribbon {
    position: absolute;
    right: -5px; top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 275px; 
    height: 275px;
    text-align: right;
}

/* new bigger attempt */
.ribbon span {
    background: rgba(0, 0, 0, 0) linear-gradient(#2989d8 0%, #1e5799 100%) repeat scroll 0 0;
    box-shadow: 0 3px 10px -5px rgb(0, 0, 0);
    color: #fff;
    display: block;
    font-size: 10px;
    font-weight: bold;
    line-height: 20px;
    position: absolute;
    right: -85px;
    text-align: center;
    text-transform: uppercase;
    top: 32px;
    transform: rotate(45deg);
    width: 250px;
}

Answer 1

Try this. I updated the width/height/top/left on .ribbon and top/right on .ribbon span.

.box {
  width: 200px;
  height: 200px;
  background: gainsboro;
  position: relative;
}


/* CSS ribbon styles */


/* http://www.cssportal.com/css-ribbon-generator/ */

.ribbon {
  position: absolute;
  right: -6px;
  top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 115px;
  height: 115px;
  text-align: right;
}

.ribbon span {
  font-weight: bold;
  font-size: 10px;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 125px;
  display: block;
  background: linear-gradient(#2989d8 0%, #1e5799 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 28px;
  right: -24px;
}

.ribbon span::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: -1;
  border-left: 3px solid #1e5799;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}

.ribbon span::after {
  content: "";
  position: absolute;
  right: 0px;
  top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #1e5799;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}

<div class="box">
  <div class="ribbon"><span>PAST PRESIDENT</span></div>
</div>