<div class="fork-ribbon-wrapper red fixed">
  <div class="fork-ribbon-border"></div>
  <div class="fork-ribbon-container">
    <div class="fork-ribbon">
      <div class="fork-ribbon-content"><a href="#"><i class="fa fa-github"></i><br/>Fork me on GitHub</a></div>
    </div>
  </div>
</div>

<div class="fork-ribbon-wrapper green">
  <div class="fork-ribbon-border"></div>
  <div class="fork-ribbon-container">
    <div class="fork-ribbon">
      <div class="fork-ribbon-content"><a href="#"><i class="fa fa-github"></i><br/>Fork me on GitHub</a></div>
    </div>
  </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

html {  
  width:100%;
  height:100%;
  font-family: 'Open Sans', sans-serif;
  text-align:center;  
}

body {
  margin: 0;
  padding: 0;  
}

@ribbonTop: 10px;
@ribbonRight: 20px;
@ribbonWidth: 80px;
@ribbonHeight: 70px;
@ribbonCorner: @ribbonWidth/2;
@ribbonMargin: 10px;
@ribbonShadowWidth: @ribbonWidth + (4*@ribbonMargin);

.fork-ribbon-wrapper {
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;
  display: inline-block;  
  cursor:move; 
  cursor:-moz-grab;
  cursor:-webkit-grab;  
  cursor:grab;
  z-index: 9999;  
    
  .fork-ribbon-border {
    width: @ribbonShadowWidth;
    height: 55px;
    position: absolute;
    top: -50px;
    left: -@ribbonMargin;    
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
  }

  .fork-ribbon-container {
    position: relative;    
    box-sizing: border-box;    
    transition: top 1s ease 0s;
    top: -65px;
    margin: 0 @ribbonMargin;    
    height: @ribbonHeight + @ribbonCorner;
    width: @ribbonWidth + 2px;    

    &:hover {      
      transition: top 1s ease 0s;
      top: 0;
    }
  }

  .fork-ribbon {
    box-sizing: border-box;    
    -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.5);
    -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.5);
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.5);
    padding: 5px 10px;
    width: @ribbonWidth;
    height: @ribbonHeight;
    
    &:after {      
      box-sizing: border-box;
      content: "";        
      position:absolute;
      display:block;
      left: 0;
      width: @ribbonWidth;    
      top: @ribbonHeight;
      padding: 0;          
    }

    .fork-ribbon-content {             
      text-align: center;    
      -webkit-font-smoothing: antialiased;        
      text-shadow: 0 -1px rgba(0,0,0,.5);
      
      i {
        font-size: 1.5rem;
        margin: 5px 0;        
      }

      a {    
        position: relative;
        z-index: 2;       
        font-size: .75rem;      
        line-height: .75rem;
        margin-top: -5px;
        display: block;             
        cursor: pointer;
        text-decoration: none;        
      }
      
      &:before, &:after {
        content: '';
        position: absolute;
        top: 0;
        width: @ribbonWidth - 8px;
        height: @ribbonHeight + @ribbonCorner - 8px;
        z-index: 1;
      }
      
      &:before, &:after {
        border-left-width: 1px;
        border-left-style: dashed;
        border-right-width: 1px;
        border-right-style: dashed;
      }
      
      &:before {      
        left: 3px;                
      }

      &:after {      
        left: 4px;
      }
    }
  }
  
  &.fixed {
    position: fixed;
  }
  
  &.red {
    top: 10px;
    left: 40%;
    
    .fork-ribbon-container {
      border-left: 1px solid #da5050;
      border-right: 1px solid #da5050;
    }
    
    .fork-ribbon {
      background: rgb(199,59,60);
      background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.15))); 
      background-image: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));
      background-image: -ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));
      background-image: -o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));
      background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));

      &:after {
        border: @ribbonCorner solid rgb(169,50,51);
        border-top-width: 0;
        border-bottom-color:transparent;
      }
      
      .fork-ribbon-content {
        a {
          color: #efefef;
          
          &:hover {
            color: #fff;
          }
        }
        
        &:before {              
          border-left-color: #631a15;
          border-right-color: #631a15;
        }

        &:after {          
          border-left-color: #da5050;
          border-right-color: #da5050;
        }
      }
    }
  }
  
  &.green {
    top: 10px;
    right: 40%;
    
    .fork-ribbon-container {
      border-left: 1px solid #50cc50;
      border-right: 1px solid #50cc50;
    }
    
    .fork-ribbon {
      background: #007200;
      background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.15))); 
      background-image: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));
      background-image: -ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));
      background-image: -o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));
      background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));

      &:after {
        border: @ribbonCorner solid rgb(0,97,0);
        border-top-width: 0;
        border-bottom-color:transparent;    
      }
      
      .fork-ribbon-content {
        a {
          color: #fff;
          
          &:hover {
            color: #ffc;
          }
        }
        
        &:before {              
          border-left-color: #004400;
          border-right-color: #004400;
        }

        &:after {          
          border-left-color: #50CC50;
          border-right-color: #50CC50;
        }
      }      
    }
  }
}
View Compiled

External CSS

  1. //oss.maxcdn.com/fontawesome/4.4.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.