SASS Tag mixin

sassy-tag-mixin.sass

@mixin tag($fcolor,$color,$bcolor)
	$border-radius: 0.3
	$nohyp: (1.95) * sin(45deg) // 1.95 = height in ems including padding, minus border radius
	padding: .4em .6em
	border-radius: #{$border-radius}em
	background-color: $color
	color: $fcolor
	z-index: 1
	margin-right: #{$nohyp}em
	&:before
		content: ''
		position: absolute
		background-color: $bcolor
		width: #{$border-radius*1.4}em
		height: #{$border-radius*1.4}em
		border-radius: #{$border-radius}em
		right: -#{$border-radius*1.4}em
		top: 50%
		margin-top: -#{$border-radius*1.2/2}em
		z-index: 2
	&:after
		content: ''
		border-radius: #{$border-radius}em
		position: absolute
		height: #{$nohyp}em
		width: #{$nohyp}em
		top: 0
		right: -.7em
		background-color: $color
		z-index: -1
		transform-origin: 25%
		transform: rotate(45deg)

usage.md

#Sassy Tag Realistic, flat-design, adaptive, SASSy, tags for your tag lists

##Demo On CodePen

##Requires

• CSS 3 transforms
• Sinus calculation, perhaps from Terkel's MathSass or Compass

##Usage

.myTag
    @include tag(textColour,tagColour,backgroundColour)