The generated CSS use the
:after pseudo-elements to add two new elements.
Those two new elements are positionned at the exact same place. Each one have a size of 1 pixel.
They are transparent but they have a border colored on one side only.
When the arrow is located in the left side of the box, we use the
border-right-color. When the arrow is located at the top, we use the
So the trick is that by increasing the size of a border on a 1 pixel sized element, each side of the border looks like a triangle.