CSS arrows created with transform rotate: 3 demos

Creating arrows based on CSS

The arrows in websites can be required for different purposes including showing the next, previous pages or sections, checkout steps etc. or many other real world stuff where arrows are used.

In this tutorial, I am going to share with you creating the arrows based on pure CSS.

The CSS arrows are using the transform property with rotate values along with other properties.

A demo of left and right arrows

In this demo, the arrows CSS are created for the left and right directions. In the markup section, links are used that are assigned CSS classes, have a look:

See online demo and code

The CSS:

The markup:

So how is it done?

The demo-arrow-cls CSS class defines a few properties including the transition that uses ease-in-out value for the arrow. There, the border-top and border-left define the color and lining of the arrow. You may use dashed, dotted lining as well (see next example).

The demo-arrow-cls.back class is assigned the CSS transform property with rotate at 45 degrees. The demo-arrow-cls.forward is given the transform property as well with 140 degrees in rotate value.

Another demo with a different arrow style

In this demo, a few properties are changed like border colors. The top and left borders are given the dashed lining with 3px. The transition is linear unlike ease-in-out used in above example. The direction is set opposite to the above example:

See online demo and code

The CSS:

In the demo, instead of top and left borders the bottom and right borders are used.

A demo of up direction arrow

In this example, an up arrow is created by changing the angle to 135 degrees instead of 45 degrees. See the live demo by clicking the links below:

See online demo and code

The CSS in this example:

Credit: bronsrobin