CSS Arrow Generator
Arrow Size
Border width
Arrow Color
Border Color
UiRockStar CSS Arrow Generator is a free online tool to help you create and export CSS code for a custom box with an arrow on the side.

How it works

The generated CSS use the :before and :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 border-bottom-color...

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.