Diagonal borders on any edge of an element, using SVG

diagonal.less

// Give a block a slanted border
// Adapted from @omgmog's https://blog.omgmog.net/post/some-approaches-for-creating-diagonal-section-separators-for-your-website/
// Default to 30px high right-aligned white triangle on top edge
// See the comments after this mixin for diagrams of the positioning options
.diagonal-border(@opposite: 30px, @edge: 'top', @alignment: 'right', @colour: '#fff', @inset: false, @element: before) {
    // Set relative positioning so you can use absolute positioning on the triangle
    position: relative;
    // Set polygon points for the triangles - outside the block
    .setPoints() when (@edge = 'top') and (@alignment = 'left') and (@inset = false) {
        @points: '0,0, 1,1, 0,1';
    }
    .setPoints() when (@edge = 'top') and (@alignment = 'right') and (@inset = false) {
        @points: '1,0, 1,1, 0,1';
    }
    .setPoints() when (@edge = 'right') and (@alignment = 'top') and (@inset = false) {
        @points: '0,0, 1,0, 0,1';
    }
    .setPoints() when (@edge = 'right') and (@alignment = 'bottom') and (@inset = false) {
        @points: '0,0, 1,1, 0,1';
    }
    .setPoints() when (@edge = 'bottom') and (@alignment = 'left') and (@inset = false) {
        @points: '0,0, 1,0, 0,1';
    }
    .setPoints() when (@edge = 'bottom') and (@alignment = 'right') and (@inset = false) {
        @points: '0,0, 1,0, 1,1';
    }
    .setPoints() when (@edge = 'left') and (@alignment = 'top') and (@inset = false) {
        @points: '0,0, 1,0, 1,1';
    }
    .setPoints() when (@edge = 'left') and (@alignment = 'bottom') and (@inset = false) {
        @points: '1,0, 0,1, 1,1';
    }
    // Inside the block
    .setPoints() when (@edge = 'top') and (@alignment = 'left') and (@inset = true) {
        @points: '0,0, 1,0, 0,1';
    }
    .setPoints() when (@edge = 'top') and (@alignment = 'right') and (@inset = true) {
        @points: '0,0, 1,0, 1,1';
    }
    .setPoints() when (@edge = 'right') and (@alignment = 'top') and (@inset = true) {
        @points: '0,0, 1,0, 1,1';
    }
    .setPoints() when (@edge = 'right') and (@alignment = 'bottom') and (@inset = true) {
        @points: '1,0, 1,1, 0,1';
    }
    .setPoints() when (@edge = 'bottom') and (@alignment = 'left') and (@inset = true) {
        @points: '0,0, 1,1, 0,1';
    }
    .setPoints() when (@edge = 'bottom') and (@alignment = 'right') and (@inset = true) {
        @points: '1,0, 1,1, 0,1';
    }
    .setPoints() when (@edge = 'left') and (@alignment = 'top') and (@inset = true) {
        @points: '0,0, 1,0, 0,1';
    }
    .setPoints() when (@edge = 'left') and (@alignment = 'bottom') and (@inset = true) {
        @points: '0,0, 1,1, 0,1';
    }
    // Call the setPoints mixin, to make @points available to the calling context (i.e. .diagonal-border)
    .setPoints();
    // Set positioning properties based on the edge you need - outside the block
    .setPosition() when (@edge = 'top') and (@inset = false) {
        @width: 100%;
        @height: @opposite;
        @top: -@opposite;
        @right: inherit;
        @bottom: inherit;
        @left: 0;
    }
    .setPosition() when (@edge = 'right') and (@inset = false) {
        @width: @opposite;
        @height: 100%;
        @top: 0;
        @right: -@opposite;
        @bottom: inherit;
        @left: inherit;
    }
    .setPosition() when (@edge = 'bottom') and (@inset = false) {
        @width: 100%;
        @height: @opposite;
        @top: inherit;
        @right: inherit;
        @bottom: -@opposite;
        @left: 0;
    }
    .setPosition() when (@edge = 'left') and (@inset = false) {
        @width: @opposite;
        @height: 100%;
        @top: 0;
        @right: inherit;
        @bottom: inherit;
        @left: -@opposite;
    }
    // Inside the block
    .setPosition() when (@edge = 'top') and (@inset = true) {
        @width: 100%;
        @height: @opposite;
        @top: 0;
        @right: inherit;
        @bottom: inherit;
        @left: 0;
    }
    .setPosition() when (@edge = 'right') and (@inset = true) {
        @width: @opposite;
        @height: 100%;
        @top: 0;
        @right: 0;
        @bottom: inherit;
        @left: inherit;
    }
    .setPosition() when (@edge = 'bottom') and (@inset = true) {
        @width: 100%;
        @height: @opposite;
        @top: inherit;
        @right: inherit;
        @bottom: 0;
        @left: 0;
    }
    .setPosition() when (@edge = 'left') and (@inset = true) {
        @width: @opposite;
        @height: 100%;
        @top: 0;
        @right: inherit;
        @bottom: inherit;
        @left: 0;
    }
    // Call the setPosition mixin, again to make its variables accessible
    .setPosition();
    // Draw it, on the before or the after pseudo-element depending on the value of @element
    &:@{element} {
        width: @width;
        height: @height;
        top: @top;
        right: @right;
        bottom: @bottom;
        left: @left;
        display: block;
        position: absolute;
        content: '';
        @svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none"><polygon points="@{points}" fill="@{colour}"></polygon></svg>');
        background-image: ~"url('data:image/svg+xml, @{svg}')";
        background-size: 100% 100%;
    }

}

// Top edge, left aligned, inset = false
//
// .
// . .
// .   .
// .     .
// .       .
// . . . . . .
// .         .
// .  BLOCK  .
// .         .
// .         .
// . . . . . .

// Top edge, right aligned, inset = false
//
//           .
//         . .
//       .   .
//     .     .
//   .       .
// . . . . . .
// .         .
// .  BLOCK  .
// .         .
// .         .
// . . . . . .

// Right edge, top aligned, inset = false
//
// . . . . . . . . . . .
// .         .       .
// .  BLOCK  .     .
// .         .   .
// .         . .
// . . . . . .

// Right edge, bottom aligned, inset = false
//
// . . . . . .
// .         . .
// .  BLOCK  .   .
// .         .     .
// .         .       .
// . . . . . . . . . . .

// Bottom edge, left aligned, inset = false
//
// . . . . . .
// .         .
// .  BLOCK  .
// .         .
// .         .
// . . . . . .
// .       .
// .     .
// .   .
// . .
// .

// Bottom edge, right aligned, inset = false
//
// . . . . . .
// .         .
// .  BLOCK  .
// .         .
// .         .
// . . . . . .
//   .       .
//     .     .
//       .   .
//         . .
//           .

// Left edge, top aligned, inset = false
//
// . . . . . . . . . . .
//   .       .         .
//     .     .  BLOCK  .
//       .   .         .
//         . .         .
//           . . . . . .

// Left edge, bottom aligned, inset = false
//
//           . . . . . .
//         . .         .
//       .   .  BLOCK  .
//     .     .         .
//   .       .         .
// . . . . . . . . . . .

// Top edge, left aligned, inset = true
//
// . . . . . .
// .       . .
// .     .   .
// .   .     .
// . .       .
// .         .
// .  BLOCK  .
// .         .
// . . . . . .

// Top edge, right aligned, inset = true
//
// . . . . . .
// . .       .
// .   .     .
// .     .   .
// .       . .
// .         .
// .  BLOCK  .
// .         .
// . . . . . .

// Right edge, top aligned, inset = true
//
// . . . . . . . . .
// .       .       .
// .         .     .
// .  BLOCK    .   .
// .             . .
// . . . . . . . . .

// Right edge, bottom aligned, inset = true
//
//
// . . . . . . . . .
// .             . .
// .  BLOCK    .   .
// .         .     .
// .       .       .
// . . . . . . . . .

// Bottom edge, left aligned, inset = true
//
// . . . . . .
// .         .
// .  BLOCK  .
// .         .
// . .       .
// .   .     .
// .     .   .
// .       . .
// . . . . . .

// Bottom edge, right aligned, inset = true
//
// . . . . . .
// .         .
// .  BLOCK  .
// .         .
// .       . .
// .     .   .
// .   .     .
// . .       .
// . . . . . .

// Left edge, top aligned, inset = true
//
// . . . . . . . . .
// .       .       .
// .     .         .
// .   .    BLOCK  .
// . .             .
// . . . . . . . . .

// Left edge, bottom aligned, inset = true
//
//
// . . . . . . . . .
// . .             .
// .   .    BLOCK  .
// .     .         .
// .       .       .
// . . . . . . . . .