<a href="" class="tag">html5</a>
@import "compass/css3";

/* Change the font-size and you'll see all proportional */

$font-size: 50px;
$border-size: 1px;
$with-radius: true;
$parent-background: #7db9e8;

/* Some cool theming for the tag */

.theme{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  border-color: #777;
  border-style: solid;
  background-color: #fff;
  @include background-image(linear-gradient(#fff,#ddd));
  @include background-clip(padding-box);
}

/* All the necesary for making the tag */

.tag{ 
  @extend .theme;
  display: block;
  float: left;
  text-decoration: none;  
  font-size: $font-size;
  padding: ($font-size / 2) ($font-size / 1.5);
  line-height: 1;
  position: relative;
  margin-left: $font-size * 0.75;
  border-width: $border-size $border-size $border-size 0;
  
  @if($with-radius){
    @include border-radius(0 $font-size / 4 $font-size / 4 0);
  }
  
  
  &:before, &:after{
    content: "";
    position:absolute;
    display:block;
    border-width: $border-size;
  }
  
  &:before{
    @extend .theme;
    z-index: -1;
    left:0;
    top:0;
    width: $font-size * 2;
    height: $font-size * 2;  
    border-radius: 0px;
    @include transform(translate(-$font-size - $border-size , -$border-size) scale(0.70711, 0.70711) rotateZ(-45deg) );
    @if($with-radius){
      @include border-radius($font-size / 3 0 0 0);
    }
  }
  
  &:after{
    @extend .theme;
    top:-$border-size + $font-size / 2 + $font-size / 4 ;
    left:-$font-size / 3;  
    width: $font-size / 2;
    height: $font-size / 2;
    @include border-radius(50%);
    background: $parent-background;
  }
}


/* Some extra shadow :) */

.tag, .tag:before{
  @include box-shadow(2px 3px 3px rgba(0, 0, 0, 0.15));
}
.tag:after{
  @include box-shadow(inset 2px 3px 3px rgba(0, 0, 0, 0.15));
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.