[フキダシ] 暫定版

balloon.styl

balloon(position, size, color)
  position relative
  border 1px solid color
  background-color #FFF
  border-radius 5px
  &::before
  &::after
    content ""
    position absolute
    width 0
    height 0
  if(position == t)
    &::before
    &::after
      left 50%
      margin-left -(size/2)px
      border-style none solid solid
      border-width (size/2)px
    &::before
      top -(size/2)px
      border-color transparent transparent color
    &:after
      top -(size/2 - 1)px
      border-color transparent transparent #FFF

  if(position == r)
    &::before
    &::after
      top 50%
      margin-top -(size/2)px
      border-style solid none solid solid
      border-width (size/2)px
    &::before
      right -(size/2)px
      border-color transparent transparent transparent color
    &:after
      right -(size/2 - 1)px
      border-color transparent transparent transparent #FFF

  if(position == b)
    &::before
    &::after
      left 50%
      margin-left -(size/2)px
      border-style solid solid none
      border-width (size/2)px
    &::before
      bottom -(size/2)px
      border-color color transparent transparent
    &:after
      bottom -(size/2 - 1)px
      border-color #FFF transparent transparent

  if(position == l)
    &::before
    &::after
      top 50%
      margin-top -(size/2)px
      border-style solid solid solid none
      border-width (size/2)px
    &::before
      left -(size/2)px
      border-color transparent color transparent transparent
    &:after
      left -(size/2 - 1)px
      border-color transparent #FFF transparent transparent

呼び出し.styl

balloon(l, 20, red)