なんでもっと早くやらなかったのか不思議で仕方ない。
毎回普通にcss書いてたので、流石にめんどくさくてmixin作りました。
単色の吹き出しに使えます。

// mixin
@mixin balloon-arrow($direction, $duration, $color) {
    position: absolute;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    @if $direction == top {
        top: -$duration;
        left: 50%;
        margin-left: -$duration;
        border-width: 0 $duration $duration $duration;
        border-color: transparent transparent $color transparent;
    }
    @if $direction == right {
        right: -$duration;
        top: 50%;
        margin-top: -$duration;
        border-width: $duration 0 $duration $duration;
        border-color: transparent transparent transparent $color;
    }
    @if $direction == bottom {
        bottom: -$duration;
        left: 50%;
        margin-left: -$duration;
        border-width: $duration $duration 0 $duration;
        border-color: $color transparent transparent transparent;
    }
    @if $direction == left {
        left: -$duration;
        top: 50%;
        margin-top: -$duration;
        border-width: $duration $duration $duration 0 ;
        border-color: transparent $color transparent transparent;
    }
}

引数はそれぞれ
$direction 吹き出しの方向、top, right, bottom, leftで指定　bottomだったらボックスの下にくっつく
$duration 吹き出しの大きさ pxで指定
$color 吹き出しの色 hexでもrgbでもrgbaでもok

// scss
.balloon {
    background: #000;
    border-radius: 20px;
    position: relative;
        
    &:after {
        @include balloon-arrow(bottom, 20px, #000);
    }
}

• ツイート