<div class='speech_bubble'>
  말풍선 테스트 말풍선 테스트 말풍선 테스트 말풍선 테스트 말풍선 테스트
</div>

// 말풍선
// $direction: arrow의 방향, top | right | bottom | left
// $position: arrow의 위치, 0px ~ 100%,
// $position: 가운데에 위치하려면 50%
// $position: 오른쪽이나 하단 기준으로 위치를 정하려면 100%로 설정 후 마진으로 위치 조정
// $border-color: border color
// $background-color: background color
// $box-shadow: box-shadow
// $wrapper-background-color: 말풍선이 위치하는 영역의 배경색 (배경 opacity적용 시 arrow의 배경색 설정을 위해)

@function rgba-to-rgb($rgba, $background: #f00) {
  @return mix(rgb(red($rgba), green($rgba), blue($rgba)), $background, alpha($rgba) * 100%);
}

@mixin speechBubble($direction, $position, $arrow-size, $border-color, $background-color, $box-shadow, $wrapper-background-color) {
  position: relative;
  display: inline-block;
  border: 1px solid $border-color;
  background: $background-color;
  background-clip: padding-box;
  box-shadow: $box-shadow;
  box-sizing: border-box;
  vertical-align: top;

  // arrow
  &::after {
    display: block;
    position: absolute;
    #{$direction}: calc( #{-($arrow-size / 2) - 1px} );
    width: $arrow-size;
    height: $arrow-size;
    border: 1px solid;
    border-color: transparent $border-color $border-color transparent;
    background: rgba-to-rgb($background-color, $wrapper-background-color);
    background-clip: padding-box;
    content: '';

    @if ($direction == bottom or $direction == right) {
      box-shadow: $box-shadow;
    }

    @if ($direction == top or $direction == bottom) {
      left: $position;
    }

    @if ($direction == left or $direction == right) {
      top: $position;
    }

    @if ($direction == top) {
      transform: translateX(-50%) rotate(225deg);
    }

    @if ($direction == bottom) {
      transform: translateX(-50%) rotate(45deg);
    }

    @if ($direction == right) {
      transform: translateY(-50%) rotate(-45deg);
    }

    @if ($direction == left) {
      transform: translateY(-50%) rotate(135deg);
    }
  }
}

body {
  background: #f00;
}

.speech_bubble {
  @include speechBubble(bottom, 50%, 8px, #000, rgba(#000, 0.6), 3px 3px 2px 0 rgba(0, 0, 0, 0.2), #f00);
  position: absolute;
  top: 100px;
  left: 100px;
  width: 300px;
  padding: 18px;
  border-radius: 3px;
  color: #fff;
}