Svg dotted triangles border

border-style-triangles.svg.scss

// <!-- IE polyfill -->
// <!-- <script type="text/javascript" src="assets/polyfill-svg-uri/polyfill-svg-uri.min.js"></script> -->

/**
 * Color
 * Width
 * Height
 * Svg path (left,bottom center,top right,bottom)
 *
 * Use %23 instend # for the FF
 */
@mixin svg-background-repeater($color: '%23ccc', $width: 30, $height: 15, $points: '0,0 30,0 15,15') {
    content: '';
    display: block;
    position: absolute;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='"+$width+"px' height='"+$height+"px' viewBox='0 0 "+$width+" "+$height+"'><polygon points='"+$points+"' style='fill:"+$color+";' /></svg>");
}

$primary: #ccc;
$primary_encoded: '%23ccc';

.pane {
    position: relative;
    display: block;
    margin: 150px auto;
    width: 300px;
    height: 300px;
    background: $primary;
}
.pane:before {
    @include svg-background-repeater($primary_encoded, 30, 15, '15,0 0,15 30,15');
    background-repeat: repeat-x;
    width: 100%;
    height: 15px;
    bottom: 100%;
}
.pane:after {
    @include svg-background-repeater($primary_encoded, 60, 30, '0,0 60,0 30,30');
    background-repeat: no-repeat;
    width: 60px;
    height: 30px;
    top: 100%;
    left: 20px;
}