A Pen by emilio.

index.html

<div class="ribbon">
  <span>Hello Ribbon</span>
</div>

style.scss

@import "compass/css3";
/*Ribbon Mixin*/
@mixin ribbonOne($cname,$contName,$bg,$fs:1em){
  $col: lighten($bg,40%);  
  .#{$cname}{ 
     position: relative;
     background: $bg;
     color: $col;
     text-align: center;
     line-height: $fs;
     border: 0.05*$fs solid darken($bg,10%);
     padding: (0.25*$fs) (0.75*$fs) (0.25*$fs)  (0.75*$fs) ;
        &:before, &:after{
          content: "";
          position: absolute;
          display: block;
          bottom: -0.5*$fs;
          border: 0.75*$fs solid darken($bg,15%);
          z-index: -1;  
        }
        &:before{
          left: -$fs;
          border-right-width: 0.75*$fs;
          border-left-color: transparent;
        }
        &:after{
          right: -$fs;
          border-left-width: 0.75*$fs;
          border-right-color: transparent;
        }
    
    
        & #{$contName}{
            &:before,&:after{
              content: "";
              position: absolute;
              display: block;
              border-style: solid;
              border-color: darken($bg,30%) transparent transparent transparent;
              bottom:  -0.5*$fs;
            }
            &:before{
                left: 0;
                border-width: 0.5*$fs 0 0 0.5*$fs;
              
            }
            &:after{
                right: 0;
                border-width:  0.5*$fs  0.5*$fs 0 0;
            }
        }
    }
}

/*BR mixins*/
@mixin border-top-left-radius($radius) {
  -webkit-border-top-left-radius: $radius;
      -moz-border-radius-topleft: $radius;
          border-top-left-radius: $radius;
}
@mixin border-top-right-radius($radius) {
  -webkit-border-top-right-radius: $radius;
      -moz-border-radius-topright: $radius;
          border-top-right-radius: $radius;
}




@include ribbonOne('ribbon','span',#2f7899);   
/*To show*/
body{
  text-align:center;
}
/*Settings*/
.ribbon{
 font-family:sans-serif; 
 font-size:24px;
 display:inline-block;
 @include border-top-right-radius(0.15em);
 @include border-top-left-radius(0.15em);
 }           

Yes-Another-Css-Ribbon-Mixin.markdown

Yes Another Css Ribbon Mixin

Mixin based on http://jsfiddle.net/jameskoster/gwQQf/light/

A Pen by emilio on CodePen.

License.