Folded corners with Sass

Mixin for folded corners https://gist.github.com/4671844

by Jens Grochtdreis

HTML

<div class="foldtl">
     <h3>Folded Corners - top-left (tl)</h3>

    <p>Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.</p>

<p>Cum horribilem resurgere de sepulcris creaturis, sicut de iride et serpens. Pestilentia, ipsa screams. Pestilentia est haec ambulabat mortuos. Sicut malus voodoo. Aenean a dolor vulnerum aperire accedunt, mortui iam vivam. Qui tardius moveri, sed in magna copia sint terribiles legionis. Alii missing oculis aliorum sicut serpere crabs nostram. Putridi odores aere implent.</p>
</div>
<div class="foldtr">
     <h3>Folded Corners - top-right (tr)</h3>

    <p>Lee gallowglass ant-man, zero hellboy invisible woman red ghost firestar maya herrera bullseye arachne monica dawson hammer. Firestorm martian manhunter nite owl, supergirl amphibian rhona burchill invisible woman cloak black bolt spider-girl goku stephanie powell. Scarlet spider asp jeanne de wolfe magneto binary red wasp animal man hawkgirl. Psylocke warpath shocker captain universe phoebe mcallister black panther ringer. Tarantula-dead box hammer captain planet karen grant thor girl; thanos giant man.</p>

    <p>Vagabond, "man-wolf savage dragon boomer niki sanders miss martian leech," light lass guy gardner, miles warren vulcan thing moon knight. Piledriver venom ariel hulk tinkerer, songbird magog jubilee valerie hart emma frost. Fury beak malachi "the jellyfish" kelly jean grey kitty pride man-ape firepower.</p>
</div>
<div class="foldbr">
     <h3>Folded Corners - bottom-right (br)</h3>

   <p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name...

SCSS

/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #a20000; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}

h3 {color: #a20000; font-size: 18px;margin: 0 0 15px 0; }
p {margin-bottom: 10px;}
div {

  margin-bottom: 20px;
}

@mixin box-sizing($box-type){
	 -webkit-border-box: $box-type;
		-moz-border-box: $box-type;
		  	 border-box: $box-type;

}

@mixin folded-corner($position, $dimension, $cornercol, $bgcol) {
  &{
	background-color: $bgcol;
	position: relative;
	}
    &:after{
    	content: "";
	    position: absolute;
	    height:$dimension;
	    display: block;
	    background: $bgcol;
	    @include box-sizing(border-box);
	    width: 100%;
    }
	&:before {
	    content: "";
	    position: absolute;
	    width: 0px;
	    height: 0px;
	}
	
	@if $position == tl {
		& {
		  border-left: $dimension solid $bgcol;
		}
		&:after {
			top: -$dimension;
			right: 0;
			margin-left: $dimension;
		}
		
		&:before {
		  	top: -$dimension;
		  	left: -$dimension;
		  	border-bottom: $dimension solid $cornercol; 
		  	border-left: $dimension solid transparent;			
		}

		
	} @else if $position == tr {
		& {
		  border-right: $dimension solid $bgcol;
		}

		&:after {
			top: -$dimension;
			left: 0;
			margin-right: $dimension;
		}
		
		&:before {
		  	top: -$dimension;
		  	right: -$dimension;
		  	border-bottom: $dimension solid $cornercol; 
		  	border-right: $dimension solid transparent;			
		}

		
	} @else if $position == br {
		& {
		  border-right: $dimension solid $bgcol;
		}

		&:after {
			bottom: -$dimension;
			left: 0;
			margin-right: $dimension;
		}
		
		&:before {
		  	bottom: -$dimension;
		  	right: -$dimension;
		  	border-top: $dimension solid $cornercol; 
		  	border-right: $dimension solid transparent;			
		}
		
	} @else if $position == bl {
		& {
		  border-left: $dimension solid $bgcol;
		}

		&:after {
			bottom:...