말풍선 꼬리표를 만들다가 이것을 모듈화 시키는게 좋겠다 싶어 코드펜으로 옮겨봤다.

코드펜에 기록되어 있지만 저장용으로 따로 코드를 기록하자면 다음과 같다.

.triangle {
  --tail-size: 32px;
  --tail-color: hsl(120 50% 50%);
  --tail-skew: 1.2;
  --tail-angle: 90deg;
  position: relative;
  display: block;
  width: 0;
  height: 0;
  border-bottom: calc(var(--tail-size, 24px) * var(--tail-skew, 1.5)) solid var(--tail-color, #000);
  border-left: var(--tail-size, 24px) solid transparent;
  border-right: var(--tail-size, 24px) solid transparent;
  transform: rotateZ(var(--tail-angle, 0deg));
  transform-origin: 50% 50%;
  pointer-events: none;
  transition: transform 1000ms ease-out;
}

css 변수를 활용하면 손쉽게 속성을 다룰 수 있어서 모듈화하기 딱 좋다.
하지만 좌표 다루기가 너무 까다로워서 (border 속성으로 삼각형 그리기할때 좌표는 꼭지점으로 맞춰진다) absolute 같은 속성으로 띄어놓고 직접 조절하는것이 좋아 보인다.