SASS Zigzag Border

gistfile1.scss

/* border-serrated - a zig zag triangle border with linear gradient
*/
@mixin border-top-serrated($size, $color-outer) {
    & {
        position: relative;
        overflow: auto;
        padding-top: $size;
    }  
    &:before {
        top: 0px;
        background-position: left top;
        @include background(linear-gradient(-135deg, $color-outer $size / 2, transparent 0), linear-gradient(135deg, $color-outer $size / 2, transparent 0));
        @include border-serrated-helper($size, $color-outer);
    }
}
@mixin border-bottom-serrated($size, $color-outer) {
    & {
        position: relative;
        overflow: auto;
        padding-bottom: $size;
    }
    &:after {
        bottom: 0px;
        background-position: left bottom;
        @include background(linear-gradient(-45deg, $color-outer $size / 2, transparent 0), linear-gradient(45deg, $color-outer $size / 2, transparent 0));
        @include border-serrated-helper($size, $color-outer);
    }
}

@mixin border-serrated-helper($size, $color-outer) {
    content: " ";
    display: block;
    position: absolute;
    left: 0px;
    width: 100%;
    height: $size;
    background-repeat: repeat-x;
    background-size: $size $size;
}