LESS ZigZag Border

zigzagmixin.less

/*
   border-serrated - a zig zag triangle border with linear gradient
   original SASS version: https://gist.github.com/justinmc/9837998
*/
.border-top-serrated(@size, @colorOuter) {
    & {
        position: relative;
        padding-top: @size;
    }
    &:before {
        top: 0px;
        background-position: left top;
        background:linear-gradient(-135deg, @colorOuter @size / 2, transparent 0), linear-gradient(135deg, @colorOuter @size / 2, transparent 0);
        .border-serrated-helper(@size, @colorOuter);
    }
}
.border-bottom-serrated(@size, @colorOuter) {
    & {
        position: relative;
        padding-bottom: @size;
    }
    &:after {
        bottom: 0px;
        background-position: left bottom;
        background:linear-gradient(-45deg, @colorOuter @size / 2, transparent 0), linear-gradient(45deg, @colorOuter @size / 2, transparent 0);
        .border-serrated-helper(@size, @colorOuter);
    }
}

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