CSS - Arrows

CSS arrows are graphical symbols created using CSS properties, used to point the viewers attention in a specific direction. Arrows in CSS created using techniques like borders, clip paths, or icons. In this tutorial we will explore all the ways to create and style arrows in CSS.

Table of Contents

How to Create Arrows in CSS?

Arrows can be created using CSS properties as listed below:

• Using CSS Border: You can create an arrow in CSS by defining a square element and setting two of it’s adjacent borders as transparent and other two borders visible.

• Using Icons: You can use predefined arrow icons defined in libraries like Font Awesome, Material Icons, and Google Icons. They often come with ready-to-use classes or utility classes.

• Using Clip Path: The clip-path property in CSS is used to define polygon of any shape, with this you can also define arrows of any shape.

• Using Unicode Characters: For creating simple arrows, you can specify unicode characters inside containers like div, For example the code ’▶’ will make a right-pointing arrow.

CSS Arrow Using Border

The borders is the most common way to create arrows. With borders we can create two types of arrows,

• For solid arrow , Set height and width of container element to zero. Then pick any border (for example, border-bottom) set a solid color and thickness as per size of arrow. Now give same thickness and but a transparent color to two adjacent borders of it ( In this case border-left and border-right). This will create a arrow pointing upwards.

• For line arrow , Set a height and width for element depending upon size of arrow needed. Now set thickness and color for any two adjacent borders (for example border-left and border-top). Rotate element to required direction using transform property.

Example

CSS Arrows Using Icons

We can also create arrows using predefined icon libraries like Font Awesome, Material Icons, and Google Icons. Following example uses google icons to display arrows.

Example

Arrows Using Clip Path Property

We can create arrows of any shape using clip-path property in CSS.

clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);

• x1 y1, x2 y2, … are pairs of coordinates that define the vertices of the polygon. The coordinates are given as percentages or absolute units (e.g., px).

• The origin (0, 0) is the top-left corner of the element, and (100%, 100%) is the bottom-right corner.

Example

CSS Arrows Styling

The following example shows how to style an arrow in css by setting properties like color , transform-rotate , shadow and animations.

Example

CSS Tooltip Arrow

We can create a tooltip with an upward-pointing triangular arrow using CSS borders and transform property. We have used hover pseudo-class to make tooltip visible when user hovered over content.

Example