Ribbon Tags Mixin

index.html

<h2>Example 1</h2>
<div class="my-frame">
<div class="tag left-tag">
  <span>Left Tag</span>
</div>
</div>

<div class="my-frame">
<div class="tag right-tag">
  <span>Right Tag</span>
</div>
</div>


<div class="row">
<h2>More examples</h2>

<div class="my-frame">
  <div class="tag ex2-right">
   <span>Right Tag</span>
  </div>
</div>


<div class="my-frame">
<div class="tag ex2-left">
  <div class="xxx"> 
  <div class="txt">Left Tag</div>
  </div>
</div>
</div>

</div>

Ribbon Tags Mixin.markdown

Ribbon Tags Mixin ('-' * 17) Left and Right Ribbon style Tags, whit the same mixin

A Pen by emilio on CodePen.

License.

style.css

/*
* Ribbon Tag Sass Mixin
*/

/*
*  @contName: content "in" tag selector
*  @bg: Background Color
*  @left: [boolean] define left or right position of tag
*  @fs: Font Size   
*/

@import "compass/css3";

/** <-> Left To Right <->**/
@function ltr($left){
  @if $left{ @return 'left'; }
  @return 'right';
}

/** - RibbonTag Mixin -*/
@mixin ribbonTag($contName,$bg,$left:true,$fs:1em){
 $col: lighten($bg,40%);  
 $l: ltr($left);
 $r: ltr(not $left);
  
  position: absolute;
  #{$l}: -$fs/2;
  background: $bg;
  color: $col;
  text-align: center;
  text-shadow: 0 1px darken($bg,30%);
  line-height: $fs;
  padding: (0.25*$fs) (0.75*$fs) (0.25*$fs)(0.75*$fs);
    
          &:after{
          content: "";
          position: absolute;
          display: block;
          top:0;
          border: 0.75*$fs solid $bg;        
          #{$r}: -$fs;
          border-#{$l}-width: 0.5*$fs;
          border-#{$r}-color: transparent;
          }
    
        & #{$contName}{
          &:before{
            content: "";
            position: absolute;
            display: block;
            border-style: solid;
            border-color: darken($bg,30%) transparent transparent transparent;
            bottom:  -0.5*$fs;
            #{$l}: 0;
            border-top-width: 0.5*$fs;
            border-#{$r}-width: 0;
            border-bottom-width: 0;
            border-#{$l}-width: 0.5*$fs;
            }
        }
    }


/**** Example ****/

// Custom Settings 
body{
  font-family:sans-serif; 
  font-size:24px;
  color: #2f7899;
}
.tag{
  display:inline-block;
  position: absolute;
  top: 20px;
}
// Call mixin, default is left 
.left-tag{
   @include ribbonTag('span',#2f7899); 
}
// Call mixin with third parameter 'false'= right
.right-tag{
   @include ribbonTag('span',#2f7899,false); 
}
.ex2-left{
   font-size:30px;
   @include ribbonTag('.txt',#fbc822,true,2.1em);

}
.ex2-right{
   @include ribbonTag('span',#22cc99,false,2em);
}
/*To show*/

.row{
  display: block;
  float: left;
}
.my-frame{
  height: 300px;
  width: 300px;
  display: inline-block;
  position: relative;
  float: left;
  border: black solid 1px;
  background: #ddf;
  margin:10px 50px ;
  @include box-shadow(1px 1px 2px rgba(0,0,0,.7));  
}
       
/*** Example End ***/


/*Border Radius 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;
}