吹き出しの矢印を簡単につけるミックスインをつくってみた

@mixin balloon-arrow($aspect: top, $position: 50%, $color: #fff, $size: 10px){

@if $color == #fff{
    $color : $color - #333;
}

border: 1px solid $color;

&:after{
    content:'';
    position: absolute;
    border: $size solid transparent;

    @if $aspect == top {
        border-bottom-color: $color;
        border-top-width: 0;
        margin-left: - $size;
        top: - $size;
        left: $position;
    } @else if $aspect == bottom {
        border-top-color: $color;
        border-bottom-width: 0;
        margin-left: - $size;
        bottom: - $size;
        left: $position;
    } @else if $aspect == right{
        border-left-color: $color;
        border-right-width: 0;
        margin-top: - $size;
        right: - $size;
        top: $position;
        left: auto;
    } @else if $aspect == left{
        border-right-color: $color;
        border-left-width: 0;
        margin-top: - $size;
        left: - $size;
        top: $position;
    }
}

}