<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.