Speech bubble pointer SASS mixin

A simple SCSS mixin allowing you to easily create a curved speech bubble pointer.

The mixin is esily customisable, the options include:

  • Side - 'left' or 'right'
  • Size - multiplies the base size by the number you pass (default: 1)
  • Bottom - this is a percentage and it adjusts the vertical position of the speech bubble, 0% bottom, 100% top (default: 25%);
  • Foreground - this adjust the colour or the pointer on the speech bubble (default: inherit)
  • Background - this needs to be set to the background colour behind the speech bubble (default: white)

Download on Github

See the Pen speech bubble pointer mixin by Jon Catmull (@catmull) on CodePen.