Very complex Sass-mixin for creating trinagles with CSS. The IE7-solution requires special span.before or span.after, preferred tob be injected via JavaScript.

SassMeister-input.scss

// ---
// Sass (v3.2.9)
// ---


// switches between IE7-compatible-code and modern code
$isoldIE: false;
//$isoldIE: true;

@mixin b-a-complex($ba: before, $border-width: 10px, $padding: $border-width * 1.5, $border-side: left, $top-position: 0, $position-side: $border-side, $position-side-distance: 0, $border-color: #000) {
    $seladd : ":";
	padding-#{$border-side}: $padding;
	@if $isoldIE == false {
		&{position: relative;}
		&#{$seladd+$ba} {
			content: ""; 
			display: block; 
			width: 0; height: 0; 
			border: $border-width solid transparent; 
			border-#{$border-side}-color: $border-color;
			position: absolute;
			top: $top-position;
			#{$position-side}: $position-side-distance;  	
		}
	} @else {
		& {position: relative;}
		& .#{$ba}{
			*display: block; *width: 0; *height: 0; 
			*border: $border-width solid transparent; 
			*border-#{$border-side}-color: $border-color;
			*position: absolute;  
			*top: $top-position;
			*#{$position-side}: $position-side-distance;  	
		}
	}
}

.test {
    @include b-a-complex();
}

SassMeister-output.css

.test {
  padding-left: 15px;
}
.test {
  position: relative;
}
.test:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left-color: black;
  position: absolute;
  top: 0;
  left: 0;
}