Skip to content

Instantly share code, notes, and snippets.

@jensgro
Created June 12, 2013 13:11
Show Gist options
  • Save jensgro/5765111 to your computer and use it in GitHub Desktop.
Save jensgro/5765111 to your computer and use it in GitHub Desktop.
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.
// ---
// 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();
}
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment