clip-path Mixin

mixin.scss

@mixin clipped-corner($corner: bottom-right, $height: 58px, $width: 52px) {

    @if $corner == top-left {
        clip-path: polygon(0 #{$height}, #{$width} 0, 100% 0, 100% 100%, 0 100%);
    } @else if $corner == top-right {
        clip-path: polygon(0 100%, 0 0, calc(100% - #{$width}) 0, 100% #{$height}, 100% 100%);
    } @else if $corner == bottom-right {
        clip-path: polygon(
            100% calc(100% - #{$height}), /*right bottom 100% - height px*/
            calc(100% - #{$width}) 100%, /* right bottom - 100% - width px */
            0 100%, /*left bottom*/
            0 0, /*left top*/
            100% 0 /*right top*/
        );
    } @else if $corner == bottom-left {
        clip-path: polygon(0 calc(100% - #{$height}), 0 0, 100% 0, 100% 100%, #{$width} 100%);
    } @else {
        clip-path: polygon(0 0, calc(100% - #{$width}) 0, 100% #{height}, 100% 100%, 0 100%);
    }

}